Odd behavior with React Testing Library

[TrueWill]

Hi, I have a fairly complex form with the latest version that behaves properly in the browser but oddly in tests.

    <Button
          type="submit"
          onClick={onSubmit}
          disabled={!formState.isDirty || !formState.isValid}
        >
          Submit
    </Button>

In the tests, I update a field to make the form valid and then:

    const submitButton = await screen.findByRole('button', { name: /Submit/i });

    await waitFor(() => {
      expect(submitButton).toBeEnabled();
    });

The odd part is that this fails by default. However if I add the following after the button then the test passes reliably:

        <div hidden>
          { formState.isValid }
        </div>

Adjusting the timeout on the waitFor makes no difference.

Any idea on what's happening or how to diagnose it? Thanks!

[Moshyfawn]

It looks like you don't destruct the isValid form state before reading it. formState is a Proxy object - a performance optimisation you can read about in this section.

[TrueWill]

You are exactly right. This resolved my issue. Thank you! 😄