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

Question

我正在处理的 UI 根据收到的响应以不同的方式呈现。我想在收到a4xx和响应时测试用户界面。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 ，除非我手动更改处理程序，这很累人。4xx5xx

如何测试测试4xx和5xx响应？

Answer 1

如果您不想弄乱查询参数，也可以使用.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  
})