React: Warning for `act` even when code is wrapped inside it

[damusnet]

Do you want to request a feature or report a bug?

Report a bug

What is the current behavior?

react-test-renderer emits a warning to wrap code inside act even though it is.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

Here is a CodeSandbox with a component using useState that toggles a div on/off on a button click. The test finds the button, calls the onClick on the props. This would be followed by a snapshot test. However, no matter how I try and wrap the code in act, the warning persists.

Make sure to open the tests tab on the right, and to expand the console at the bottom:

What is the expected behavior?

There should be no warning.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

[email protected]
[email protected]
[email protected]
[email protected]

This worked fine with react*@16.7.0-alpha.2, snapshot and all.

[threepointone]

We should have been clearer, but TestRenderer has its own version of act. Here's a working version of your code https://codesandbox.io/s/k14k63y03v I'll update the docs later today. Will leave this open till I do.

[damusnet]

Thank you so much Sunil! I knew I was probably missing something, but I was afraid I was doing testing all wrong and would have to rewrite them all! 😅

I've tried it out in my code and it works as expected. I can even get rid of my component.update(<App />); now.

[threepointone]

brilliant, happy to hear it.

[bacha1991]

Hello,
Can you help me please? I have the save warning with different scenario. Have warnings in console.
https://codesandbox.io/s/xl92lljzwp

[threepointone]

@bacha1991 you should use TestRenderer.act() when using the TestRenderer. We mention it in our docs, but a lot of people seem to miss this. We'll make the docs clearer soon. Here's a version of your test that passes as expected https://codesandbox.io/s/485wzn7799

[bacha1991]

Thank you @threepointone, but you attached not mine code version.
My problem is here :
const [screen, changeScreen] = useState(); const handleClick = () => { changeScreen("loading"); Promise.resolve().then(() => changeScreen("loaded")); };
we call fist changeScreen and after resolve promise.
If remove promise all will be ok but promise trigger warning

[threepointone]

? I don't see that code in the codesandbox link you shared. That said, I'm guessing you're having the same problem faced by the folks in https://github.com/facebook/react/issues/14769 Please have a look there. You'll have to try with the new alpha @ 16.9.0-alpha to use the async version of act(). Please comment only there if after trying the new alpha you still have issues.

[bacha1991]

Yes, its my fail :( I updated link https://codesandbox.io/s/xl92lljzwp