2

I am using the MSW (Mock Service Worker) to mock the HTTP response in my react testing with react testing library. but, in some of the react components, I have some loading state until the response is fulfilled.

to test the intermediate loading state, is there a way to pause the ongoing service worker API and do some tests (do that we can ensure the consistency of the test) and then continue for further tests?

rahul Kushwaha
  • 2,395
  • 7
  • 32
  • 64

1 Answers1

5

First things first, using React Testing Library most likely means you're talking about tests in Node.js. There's no Service Worker API in Node.js, so we can move away from the worker to solve your use case.

There's no actual need to pause the request to achieve what you want, it seems. Note that most testing frameworks execute assertions immediately, and you won't get any issues getting an assertion as soon as the underlying code is matching (i.e. your UI is in the loading state). Adding as little as 100ms delay to your response is enough for Jest to see that a loading state is present and mark the assertion as passed:

it('displays the loading state', () => {
  server.use(
    rest.get('/resource', (req, res, ctx) => {
      return res(ctx.delay(100), /* the rest of the mocked response */)
    })
  )

  render(<YourComponent />
  // ...assert the loading state of the UI.
})

Give this approach a try and let me know if you have any issues with it.

kettanaito
  • 974
  • 5
  • 12