mardi 1 décembre 2020

"Cannot log after tests are done." for repeated call of render() in test

Most of the time I run the following test I get an error message (for some reason not EVERY time) ...

describe('<App />', () => {
    it('renders the Component', async () => {   
        await act(async () => render(<App />));
    })
    it('renders the Component', async () => {   
        await act(async () => render(<App />));
    })
});

I need to wrap my component inside act because I am using useEffect when mounting App to fetch user data. For fetching in the test environment I am using the msw package to simulate the server responses. Testing the function that calls the user data is successful, so I doubt it has anything to do with this error:

Cannot log after tests are done. Did you forget to wait for something async in your test?
    Attempted to log "Warning: An update to App 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
        at App (/Users/.../src/Components/App/App.js:39:65)
        at Router (/Users/.../node_modules/react-router/cjs/react-router.js:99:30)
        at MemoryRouter (/Users/.../node_modules/react-router/cjs/react-router.js:187:35)".

      37 |                     <NavBar className="NavBar"/>
      38 |                 </header>
    > 39 |                 <Switch>
         |                                                       ^
      40 |                     <Route exact path="/">
      41 |                         <SearchBar onSearch={onSearch} />
      42 |                         <QuoteList quotes={searchResults} />

I don't expect anyone to provide me with the solution but any feedback on how to approach this problem/ what to try is welcome because I am totally lost.

Aucun commentaire:

Enregistrer un commentaire