如何在反应测试库中暂停 Mock Service Worker 以测试中间状态？

Question

我在使用 React 测试库进行 React 测试时使用 MSW（Mock Service Worker）来模拟 HTTP 响应。但是，在一些反应组件中，我有一些加载状态，直到响应完成。

测试中间加载状态，有没有办法暂停正在进行的service worker API 做一些测试（这样做可以保证测试的一致性），然后继续进行进一步的测试？

Answer 1

首先，使用 React 测试库很可能意味着您在 Node.js 中谈论测试。 Node.js 中没有 Service Worker API，因此我们可以离开 worker 来解决您的用例。

似乎不需要暂停请求来实现您想要的效果。请注意，大多数测试框架会立即执行断言，一旦底层代码匹配（即您的 UI 处于加载状态），您就不会遇到任何问题。在您的响应中添加少至 100 毫秒 delay 就足以让 Jest 看到加载状态存在并将断言标记为已通过：

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.
})

试试这个方法，如果您有任何问题，请告诉我。

如何在反应测试库中暂停 Mock Service Worker 以测试中间状态？

how to pause the Mock Service Worker for testing the intermediate state, in react testing library?

reactjs

unit-testing

react-testing-library

msw