Identify which test is causing the act(...) warning

[andrico1234]

Describe the feature you'd like:

When working on a test file (or many test files)that contains many it blocks, that breaks the rules of the act function, it's difficult to determine which test is causing this based on the error message alone:

 Warning: An update to Toast 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://fb.me/react-wrap-tests-with-act
        in Toast (created by ToastContainer)
        in div (created by ToastContainer)
        in div (created by ToastContainer)
        in ToastContainer

Suggested implementation:

I suggest logging out the first argument of the it function.

e.g.

it('should submit a form', () => {
// fires a naughty event that breaks the rules of act()
}

should display the following in the console:

 Error in test: "it should submit a form"
 Warning: An update to Toast 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://fb.me/react-wrap-tests-with-act
        in Toast (created by ToastContainer)
        in div (created by ToastContainer)
        in div (created by ToastContainer)
        in ToastContainer

Describe alternatives you've considered:

Teachability, Documentation, Adoption, Migration Strategy:

[andrico1234]

I actually just noticed that this is a ReactDOM issue, not an RTL one:

console.error: node_modules/react-dom/cjs/react-dom.development.js:88

I'm looking into the RTL repo now, but is there a way to determine if this error gets called?

[eps1lon]

Could you include what you're doing and what you're currently seeing? It's unclear whether this is a testing-library or react or jest issue.

[kentcdodds]

In the latest version of jest, logs will include stack traces which should help determine the source of the act warning a lot more. Try updating jest?

[andrico1234]

Hi @eps1lon

So the act error is coming up in two places, the first is when i use cogo-toast for popups. I figure since they disappear automatically after a certain interval, it's difficult for me to wrap that DOM change in an act block, but I think I can get to the bottom of it regardless.

The other scenario in which this is happening, and one more frustrating, is when I use the react-query package. @kentcdodds mentioned in a ticket on react-query github repo, in that it requires manual cleanup at the end of each test block.

Full issue can be found here: TanStack/query#432

I think you might be right in that this is probably not a RTL issue, in which case I'll be happy to have this problem closed.

@kentcdodds I did just upgrade, and while the verbose logging helped for some unrelated errors, it didn't help in determining exactly which tests were running the act issues.

[kentcdodds]

Interesting... It's helped me a ton: https://twitter.com/kentcdodds/status/1260611107539963905

Sorry it's been so much trouble for you @andrico1234. As you mentioned, it's not an React Testing Library issue, so I'll go ahead and close this. Good luck.

[MichaelDimmitt]

@andrico1234

bash to the rescue. (note: I did this on a mac)
yarn test --maxWorkers=50% 2>&1 | grep 'act((' -B 8 | grep PASS

came up with a grep that solves this:

1. grep 'act((' , search for the nearest unique identifier of the warning to test name.

2. -B 8 , means grap 8 lines before. explanation link: stackoverflow, grep lines before/after

3. grep PASS , search for tests that passed.

results:

PASS yourapp/file/file1.test.tsx 
PASS yourapp/file/file2.test.tsx 
PASS yourapp/file/file3.test.tsx 
PASS yourapp/file/file4.test.tsx 

I did not include fail because you can find your tests that are failing with the following bash command.

yarn test --maxWorkers=50% 2>&1 | grep FAIL | sort -u

[MichaelDimmitt]

made a cool gist about this https://gist.github.com/MichaelDimmitt/5b82abc956974fc5b3f9ea2bc8b3159c