onChange not firing in RTL for userEvent.type

General
1

I’m working on tests using RTL for a simple React component that wraps JsonForms. I’m using the recommended window.matchMedia object and my tests in general are working fine.

The component takes a prop with the initial data to load into the form. I verified that the form onChange fires on my test’s initial render of the component. What doesn’t work is using userEvent.type to change the value in one of my text inputs. The DOM gets updated but the form’s onChange doesn’t fire.

When a user changes form values, some buttons are enabled and that’s what I’d like to test. Most of what I’ve found involves setting a timeout to wait for the update. I tried that with no luck. Some other examples change the button states directly in the onChange but I think those pass because the onChange fires on the initial rendering of the form.

2

Ugh, sorry guys! I didn’t implement the timeout in RTL correctly. This worked for me

await waitFor(
() => expect(screen.getByText(‘Save’)).toBeEnabled(),
{ timeout: 1000 }
).then(() …

1 Like
3

Hi @chadrjohnson,

You’re right, we use timeouts for this use case. Did you make sure to call done() or something equivalent in your timeout tests? Can you post the test which is failing for you?

Edit: Great that it works for you!

fyi: We got rid off the Hidden components with JSON Forms 3.3.0, so the matchMedia mock is no longer be required. I used this opportunity to remove the mock from the code base.