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

Question

我正在处理的 UI 根据收到的响应以不同的方式呈现。我想在收到 a4xx和5xx响应时测试 UI。

我的 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响应，使其无法在收到4xx或5xx响应时测试 UI，除非我手动更改处理程序，这很累人。

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

Answer 1

使用搜索参数来控制get请求的响应。

传入一个变量req.body来控制请求的响应是否成功post。

请参阅条件响应

import { setupWorker, rest } from 'msw';

const worker = setupWorker(
  rest.get('/items/', (req, res, ctx) => {
    const error = req.url.searchParams.get('error')
     
    // error response
    if(error === 'network') {
      return res(
        ctx.status(200),
        ctx.json({
          errorMessage: 'Network error',
        }),
      )
    }

    // successful response
    return res(ctx.status(200), ctx.json(items));
  }),
)