Как условно имитировать ответы на ошибки с помощью msw

Question

Пользовательский интерфейс, над которым я работаю, отображается по-разному в зависимости от полученного ответа. Я хотел бы протестировать пользовательский интерфейс, когда будут получены ответы и.

Мой обработчик 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 response, из-за чего он не может протестировать пользовательский интерфейс, если получен ответ или, если я не изменю обработчики вручную, что утомительно.

Как можно проводить тесты на 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  
})

Answer 2

Используйте параметры поиска, чтобы контролировать свой ответ для 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));
  }),
)