Test with react-aria useButton gives me the famous "act" warning

[manelsanz]

• @testing-library/user-event version: 13.5.0

• Testing Framework and version: "@testing-library/react": "12.1.2"
• DOM Environment: "@testing-library/jest-dom": "5.16.1"

What you did:

const handleOnClick = jest.fn();

  it('should execute the callback function onClick', () => {
    render(<Button onPress={handleOnClick}>test me</Button>);

    const testButton = screen.getByRole('button');
    expect(testButton).toBeInTheDocument();

    userEvent.click(testButton);

    expect(handleOnClick).toHaveBeenCalledTimes(1);
  });

What happened:

console.error
    Warning: An update to Button 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 */

Problem description:

The userEvent.click produces the famous "act" warning, while fireEvent.click not. If useEvent.click is wrapped by act, warning dissapears, but that's not recommended (inclusive in eslint-plugin-testing-library marks as error).

Suggested solution:

Wrap all userEvent with and act, but that's not a "correct" solution...

[ph-fritsche]

userEvent internally uses fireEvent which is configured by importing @testing-library/react to automatically wrap the event dispatching with act.
Therefore synchronous state changes in the event handling do not require any additional act. On the contrary, as act batches state changes, this might result in unexpected behavior as all interaction happens on the previous render result.

Does @testing-library/dom imported by @testing-library/user-event resolve to the same installation as @testing-library/dom imported by @testing-library/react in your environment?

[manelsanz]

I don't know how to check that.. I just have taken a look to package-lock.json and @testing-library/user-event has no dom dependency, while @testing-library/react has.
Anyway, the problem here is the use of react-aria useButton in my Button component. With a normal <button onClick="function()">, userEvent.click works as expected without any warning, but not with the custom Button component with useButton..

[ph-fritsche]

Maybe it's not the click event triggering the warning. userEvent.click dispatches multiple events that happen when a user clicks an element.

Also please try to use v14.0.0-beta. Maybe there is an asynchronous update and the now asynchronous API just works™.

[manelsanz]

Already tried v14.0.0.beta.7, and still same warning. I paste the full warning message to try to solve that...

 ✓ should execute the callback function onClick (139 ms)
  console.error
    Warning: An update to Button 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 */

    This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act
        at Button (/home/USER/PROJECT/src/components/_global/atoms/Button/Button.tsx:21:26)

      at printWarning (node_modules/react-dom/cjs/react-dom.development.js:67:30)
      at error (node_modules/react-dom/cjs/react-dom.development.js:43:5)
      at warnIfNotCurrentlyActingUpdatesInDEV (node_modules/react-dom/cjs/react-dom.development.js:24064:9)
      at setPressed (node_modules/react-dom/cjs/react-dom.development.js:16135:9)
      at triggerPressEnd (node_modules/@react-aria/interactions/dist/packages/@react-aria/interactions/src/usePress.ts:179:7)
      at Document.onMouseUp (node_modules/@react-aria/interactions/dist/packages/@react-aria/interactions/src/usePress.ts:517:11)
      at Document.callTheUserObjectsOperation (node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)