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

Question

我正在使用 MSW（模拟服务工作者）在我的反应测试中使用反应测试库模拟 HTTP 响应。但是，在某些反应组件中，我有一些加载状态，直到响应完成。

为了测试中间加载状态，有没有办法暂停正在进行的服务工作者 API 并进行一些测试（这样做我们可以确保测试的一致性），然后继续进行进一步的测试？

Answer 1

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

似乎没有实际需要暂停请求来实现你想要的。请注意，大多数测试框架会立即执行断言，只要底层代码匹配（即您的 UI 处于加载状态），您就不会遇到任何问题。在响应中添加 100 毫秒的延迟就足以让 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.
})

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