如何使用 msw 有条件地模拟错误响应

我正在处理的 UI 根据收到的响应以不同的方式呈现。我想测试用户界面4xx and 5xx收到答复。

我的 api 处理程序看起来像：

import { rest } from 'msw';
import { items } from './apiValues';

export const handlers = [
  rest.get('/items/', (_req, res, ctx) => res(ctx.status(200), ctx.json(items))),
];

这将始终返回一个2xx响应使其无法测试 UI，如果4xx or 5xx收到响应，除非我手动更改处理程序，这很累人。

如何测试4xx and 5xx响应进行测试？

如果您不想弄乱查询参数，也可以使用.use() https://mswjs.io/docs/api/setup-server/use功能。

1. 无论您在何处设置处理程序，请为要测试的每个条件添加另一个数组

export const errorHandlers = [
  rest.get('/items/', (_req, res, ctx) => res(ctx.status(500), ctx.json(null))),
];

2. 在您的测试文件中，导入您已设置的处理程序和 msw 服务器，然后在测试中，将处理程序传播到您要使用的服务器实例中。

import { errorHandlers } from './handlers'
import { mswServer } from 'setupTests'

test('handles errors', () => {
  mswServer.use(...errorHandlers)
  // ...the rest of your test  
})