DEV Community

Discussion on: Using React Hook Form v6+ with Ionic React Components - Update

Collapse
 
wendyperalta profile image
Wendy

Thank you for updating this. How would you go about testing this component? I have a simple Ionic Text Input component wrapped in a Controller just like the example above.

<Controller
      control={control}
      name="emailInput"
      rules={{ required: true }}
      render={({ value, onChange, onBlur }) => (
        <IonInput
          type="text"
          value={value}
          data-testid="input-email"
          onIonChange={onChange}
          onBlur={onBlur}
        />
      )}
    />

I've tried to use the example from this article:

import { ionFireEvent as fireIonEvent } from "@ionic/react-test-utils";
const emailInput = await findByTestId("input-email");
fireIonEvent.ionChange(emailInput, "test@email.com");

I've also tried this (since ion input components have a detail property that specifies the value of the input:

import { fireEvent } from "@testing-library/react";
fireEvent.change(emailInput, { target: { detail: { value: {"test@email.com" }}});

None of these methods get me what I need which is the value for these inputs being updated in the test. Any ideas?

Collapse
 
patelrikin profile image
Rikin Patel

You can probably do debug() from testing library after each fired event and see if the thing changed at all to investigate

Collapse
 
wendyperalta profile image
Wendy

I did do that, but it didn't change.

Thread Thread
 
aaronksaunders profile image
Aaron K Saunders

put the id on the Controller and fire a onChange event don't use the ionic events

Thread Thread
 
wendyperalta profile image
Wendy

When I moved the data-testid='input-email' to the Controller component wrapper, now I get an error in the test:
TestingLibraryElementError: Unable to find an element by: [data-testid="input-email"]
I'm assuming because it is a custom component.

Thread Thread
 
aaronksaunders profile image
Aaron K Saunders

can you put a simple project together on stackblitz?

Thread Thread
 
uxtx_tim profile image
Tim Proffitt

Im curious what came of this - having the same issues :(