Description
@testing-library/reactversion: 14.3.0- Testing Framework and version: Jest 29.7.0
- DOM Environment: jsdom 20.0.3
Relevant code or config:
it('uses a text field via user-event', async () => {
render(<TextField label="Value"/>);
const input = screen.getByLabelText('Value');
await userEvent.type(input, 'Hello');
expect(input.value).toEqual('Hello');
});What you did:
Upgrade to @testing-library/dom 10.0.0 and @testing-library/react 14.3.0.
@testing-library/react 14.3.0 still depends on @testing-library/dom 9.x. As a result of this mismatch, any tests using @testing-library/user-event now start generating warnings similar to the following:
Warning: An update to ForwardRef(FormControl) inside a test was not wrapped in act(...).
When testing, code that causes React state updates should be wrapped into act(...):
act(() => {
/* fire events that update state */
});
/* assert on the output */
even though Testing Library intends to take care of calling act itself.
What happened:
Spurious act warnings.
Reproduction:
https://github.com/joshkel/testing-library-act
This uses an NPM override to force everything to @testing-library/dom 10.0.0, so the error does not occur. If you delete the override from package.json and rerun npm i; npm test, you'll see that fireEvent.change does not generate warnings but userEvent.type does.
Problem description:
See above - ideally, projects within an ecosystem use matching versions, upgrades don't add warnings, etc.
Suggested solution:
Update @testing-library/react to use the latest @testing-library/dom.
(I believe that this situation occurred because @testing-library/user-event wants @testing-library/dom via peerDependencies, while @testing-library/react wants @testing-library/dom via dependencies - if @testing-library/react used peerDependencies instead of dependencies, or if @testing-library/user-event avoided an explicit peerDependencies, this would be avoided - although other issues would likely arise.)