react-native-testing-library icon indicating copy to clipboard operation
react-native-testing-library copied to clipboard

Warning: You called act(async () => ...) without await. 2 minute repro on examples/reactnavigation

Open princefishthrower opened this issue 4 years ago • 4 comments

Describe the bug

I see the infamous Warning: You called act(async () => ...) without await. after a fresh clone and install checking out the reactnavigation example.

Expected behavior

No warnings. I thought react-native-testing-library is supposed to wrap all async actions in act already? I guess and use await

Steps to Reproduce

  1. Clone this repository: git clone https://github.com/callstack/react-native-testing-library.git
  2. Move into the proper example: cd react-native-testing-library/examples/reactnavigation
  3. Install packages: npm install (You need npm install --legacy-peer-deps if you are using a newer version of Node)
  4. Run tests: npm run test
  5. See warnings in test output:
console.error
      Warning: You called act(async () => ...) without await. This could lead to unexpected testing behaviour, interleaving multiple act calls and mixing their scopes. You should - await act(async () => ...);

Versions

npmPackages:
    @testing-library/react-native: ^7.0.0-rc.0 => 7.2.0 
    react: ^16.13.1 => 16.14.0 
    react-native: ^0.62.2 => 0.62.3 
    react-test-renderer: ^16.13.1 => 16.14.0

princefishthrower avatar Nov 09 '21 17:11 princefishthrower

I believe this happens when calling several times await findByText in a row though I'm not sure why. In this example the tests don't need to be asynchronous so removing async and using getBy instead of findBy works fine and it makes the warning go away. I also think it's a bad pattern to use findByText by default and to make all tests asynchronous when it is not necessary, so I'd recommend either changing the example so that we really need to use waitfor in the tests or using plain getByText

pierrezimmermannbam avatar Dec 06 '21 19:12 pierrezimmermannbam

The thing is @pierrezimmermannbam that when you actually need to use findBy (or any kind of await for async operation) twice in the same test, you'll always have the warning.

teves-castro avatar Jan 19 '22 09:01 teves-castro

@teves-castro it seems to be linked to Promise being overridden by react native preset. Not sure wether this can be fixed but using rntl preset which restores original Promise fixes the warning for me. Bumping the version of rntl and using the preset also fixes the warning in the example repo

pierrezimmermannbam avatar Feb 07 '22 21:02 pierrezimmermannbam

I am not sure what exactly causes the async act() warning. It does not seem to be using two awaits in a single test, as this test has two await findBy calls, but does not give the warning. It may be more connected to using findBy/waitFor in cases they are actually not needed.

mdjastrzebski avatar Aug 19 '22 22:08 mdjastrzebski

Closing as the error no longer occurs when running tests in examples/reactnavigation.

mdjastrzebski avatar Sep 26 '22 12:09 mdjastrzebski