Add relevant stacktrace to act warnings

React version: ^16.8.0

Steps To Reproduce

1. set state without wrapping in act
2. observe the act warning

Link to code example:

The current behavior

Right now the act warning gives a component stack trace which is nice, but in the age of reusable hooks, it’s not enough to help people really identify where the issue is because it could be in hooks far away from the component.

Here’s an example of the output:

  console.error node_modules/react-dom/cjs/react-dom.development.js:530
    Warning: An update to Comp 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 Comp (at example.test.js:23)

The expected behavior

I think it would be nice if a stack trace were included in addition to the component stack trace. I would expect that the stack would only include non-react code.

Here’s an example of what I think would look good:

  console.error node_modules/react-dom/cjs/react-dom.development.js:530
    Warning: An update to Comp 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 Comp (at example.test.js:23)
    
    Stack Trace: 
        at Object.<anonymous> (/Users/kentcdodds/Desktop/0mv31/src/example.test.js:25:3)

In a more real world scenario (like one I’m dealing with right now) here’s what it might look like:

  console.error node_modules/react-dom/cjs/react-dom.development.js:88
    Warning: An update to StatusButtons 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 StatusButtons (at book.js:69)
        in div (created by Context.Consumer)
        in EmotionCssPropInternal (at book.js:59)
        in div (created by Context.Consumer)
        in EmotionCssPropInternal (at book.js:50)
        in div (at book.js:49)
        in div (created by Context.Consumer)
        in EmotionCssPropInternal (at book.js:32)
        in div (at book.js:31)
        in BookScreen (at book.js:33)
        in MockAuthProvider (at context/index.js:15)
        in Router (created by BrowserRouter)
        in BrowserRouter (at context/index.js:14)
        in ReactQueryConfigProvider (at context/index.js:13)
        in AppProviders (at app-test-utils.js:9)
        in Wrapper
    
    Stack Trace: 
        at rerender (/Users/kentcdodds/code/bookshelf/node_modules/react-query/src/utils.js:119:45)
        at Object.onStateUpdate (/Users/kentcdodds/code/bookshelf/node_modules/react-query/src/useBaseQuery.js:67:28)
        at forEach (/Users/kentcdodds/code/bookshelf/node_modules/react-query/src/queryCache.js:224:38)
        at Array.forEach (<anonymous>)
        at dispatch (/Users/kentcdodds/code/bookshelf/node_modules/react-query/src/queryCache.js:224:23)
        at /Users/kentcdodds/code/bookshelf/node_modules/react-query/src/queryCache.js:234:11

That would be an enormous help because the offending code is not my own but one of my dependencies.

Thanks!

[gaearon]

I have a strong deja vu

https://github.com/facebook/jest/issues/8819

[kentcdodds]

lol 😂 I totally forgot about that

Sorry for the trouble 😅