Test with useButton gives me the famous "act" warning

[manelsanz]

Hi, i'm using react-aria and react testing-library.
In my Button component, i'm using react-aria's useButton and I use onPress prop to pass the function to call once click. In the unit test, I just try to click it in order to trigger a simple jest.fn() function, and all I do after that is check if function have been called.

const handleOnClick = jest.fn();
render(<Button onPress={handleOnClick}>test me</Button>);

userEvent.click(screen.getByRole('button'));
expect(handleOnClick).toHaveBeenCalled();

That is showing the following warning:

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(...):

If I wrap the click with act the warning is gone, but seems it's not a good practice to do that, because, in fact, testing library is doing an act internally in userEvent and in other methods. What can I do? Thanks.

[snowystinger]

That test works for us

react-spectrum/packages/@react-spectrum/button/test/Button.test.js

Line 34 in c838181

it.each`

Would you mind trying what we do in triggerPress? (we need to update that now that userEvent has had some releases that cover the problems we used to have with it)
https://github.com/adobe/react-spectrum/blob/main/packages/dev/test-utils/src/events.ts#L19
You could try some other versions of userEvent as well.

[manelsanz]

You are right, sorry. Still I don't know what exactly is producing this warning, but I deleted package-lock.json (was in our repo) and node_modules folder and rerun npm i, and after deal with some interopRequireDefault error, could run tests without warning. Thank you and sorry for the disturbances.

Have a good day!

[snowystinger]

no worries, happens some times, glad it's working now, that's all that matters :)

[pentzzsolt]

I am facing this same issue now. If you clone my repository, run npm install and then npm test, the tests pass, but there is a warning:

  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

It's a simple app scaffolded using CRA Typescript template, and I added @react-aria/button as a dependency. The Button component looks like this:

import { useButton } from '@react-aria/button';
import { ButtonProps } from './types/ButtonProps';
import { useRef } from 'react';

export const Button = ({ children, onPress }: ButtonProps): JSX.Element => {
  let ref = useRef(null);
  let { buttonProps } = useButton({
    onPress
  }, ref);

  return <button {...buttonProps} ref={ref}>{ children }</button>;
};

And the tests look like this:

import { render, screen } from '@testing-library/react';
import { Button } from './Button';
import userEvent from '@testing-library/user-event';

const dummyButton = 'Dummy button';
const dummyFunction = jest.fn();

test('renders button with the correct label', () => {
  render(<Button>{ dummyButton }</Button>);
  const button = screen.getByRole('button', {
    name: dummyButton
  });
  expect(button).toBeVisible();
});

test('calls the function that was passed', () => {
  render(<Button onPress={dummyFunction}>{ dummyButton}</Button>);
  const button = screen.getByRole('button', {
    name: dummyButton
  });
  userEvent.click(button);
  expect(dummyFunction).toHaveBeenCalled();
});

Wrapping the userEvent.click call in act makes the warning disappear.

[LFDanLu]

From user-event's installation page:

If you use one of the framework wrappers, it is important that @testing-library/dom is resolved to the same installation required by the framework wrapper of your choice.
Usually this means that if you use one of the framework wrappers, you should not add @testing-library/dom to your project dependencies.

I installed your repo locally and noticed that multiple versions of that package were installed due to @testing-library/react@13.4.0 and @testing-library/user-event@13.5.0 having different deps for @testing-library/dom. I added the following override to your package.json and the tests ran without that warning:

  "overrides": {
    "@testing-library/dom": "8.20.1"
  },

[pentzzsolt]

Thanks for your reply! Interestingly, my repository is a new app scaffolded using CRA. It might be worth following up with them on this.