0

I've just started using MSW (https://mswjs.io/) in the tests. I came however across a case that I have no clue how to deal with.

Let's say we are testing component A (render <A /> in a test) which makes three different API requests. All of them are done independently in the useEffect section of component A.

The first test checks the influence of the first request (e.g. request returns a list and the list is rendered). The second test checks something related to second request and so forth. I'd like that any test is as independent as it could be and verifies one thing only.

Let's see what's happening in the first test:

  1. render <A /> triggers three requests.
  2. waitFor waits for the data from first requests and it's influence in the UI.
  3. If A renders correctly - the tests passes and waitFor is over.
  4. Second and third request is under way and the first tests is not waiting for it (since it's not related to things checked in the first test). This situation causes warnings Can't perform a React state update on an unmounted component.

What is the approach I should follow to get rid of the warning?

Should the first test has direct indication to wait for second and third request to be finished? If so, it means that I'm gonna end up with not independent tests. Is that correct?

Marcin
  • 770
  • 6
  • 12
  • It would be helpful to see more example code for both the component and tests, but I imagine if you waited for all requests to finish it would remove the warning. What I generally do in this case is use `await screen.findByText('some text);` which replaces the need for `waitFor`. 'some text' in this scenario would only be displayed once the third and final request has finished, meaning everything is finished loading. More code would certainly make this more clear though. – Cathal Mac Donnacha Nov 23 '22 at 23:40

0 Answers0