Spurious not wrapped in act warnings from user-event, react, dom mismatch

[joshkel]

• @testing-library/react version: 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.)

[TheRealCuran]

We can report the same issue with our tests. Upgrading to all the latest versions of @testing-library breaks due to the version missmatch.

[joshkel]

Fixed by #1295

[Slessi]

@joshkel I didn't have the problem before, but trying to upgrade to v15 actually causes it for me.

➜  npm ls @testing-library/dom     

├─┬ @testing-library/[email protected]
│ └── @testing-library/[email protected]
└─┬ @testing-library/[email protected]
  └── @testing-library/[email protected]

Does @testing-library/user-event need an update? Am I meant to install @testing-library/dom myself?

I currently only have these:

    "@testing-library/jest-dom": "^6.4.2",
    "@testing-library/react": "^15.0.2",
    "@testing-library/user-event": "^14.5.2",

Edit: Doing this fixes it, ridiculous 🤪

npm i -D @testing-library/dom
npm uninstall @testing-library/dom
npm ls @testing-library/dom       

├─┬ @testing-library/[email protected]
│ └── @testing-library/[email protected]
└─┬ @testing-library/[email protected]
  └── @testing-library/[email protected] deduped

[MatanBobi]

@Slessi We're working on moving DTL to peer in RTL so this won't happen :)