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