react hook form testing isValid always false

[Santosl2]

Hi everyone, recently i tried testing my Form, and my submit button has attribute disabled and the same receive the react hook form isValid prop.

But the case is: the prop isValid not change

I using:

• Next JS
• Zod Schema
• React Select

Details:

i mocked my react-select component and the result is equal this

Snippets

the test

[leapful]

@Santosl2

Please share a codesandbox url to re-produce the issue.

[Santosl2]

Yes dude.

[Santosl2]

Is here https://codesandbox.io/s/funny-yonath-m1nxu2?file=/pages/index.tsx. Just run npm run test to re-produce the issue

[Santosl2]

So... someone can help me?

[leapful]

@Santosl2

Your jest.setup.ts file for finding option value is not correct because option value is number but data from select element is string. It should be:

jest.setup.ts, line 15

const option = options.find(
        (op) => `${op.value}` === event.currentTarget.value
      );

Furthermore, formState.isValid is a proxy object therefore it will be updated in next re-rendering, so a custom wait should be applied in order to get update formState value.

index.test.ts

describe("Home", () => {
  it("button must be enabled when user select your option", async () => {
    render(<Home />);

    expect(screen.getByText("Continue")).toBeDisabled();

    const input = screen.getByTestId("select");

    fireEvent.change(input, {
      target: {
        value: 2
      }
    });

    // Add custom wait to get correct form state in next re-rendering
    await new Promise((resolve) => setTimeout(resolve, 0));

    await waitFor(() => {
      expect(screen.getByText("Continue")).toBeEnabled();
    });
  });
});

[Santosl2]

WOWW! How did i not notice this? LOL

Thx dude!!

I use your solution, but with some refactors.

in jest.setup.ts, line 15

  const option = options.find(
        (op) => op.value == event.currentTarget.value
      );

I only changed the strict equality operator for the equality operator.

And in my index.test.ts, i used RTL`s act method.. It was something like:

describe("Home", () => {
  it("button must be enabled when user select your option", async () => {
    render(<Home />);

    expect(screen.getByText("Continue")).toBeDisabled();

    const input = screen.getByTestId("select");

    await act(async () => {
      fireEvent.change(input, {
        target: {
          value: 2
        }
      });
    });

    expect(screen.getByText("Continue")).toBeEnabled();
  });
});

So men, thank you very much!