在测试错误响应时，测试失败了预期的错误（React/jest/reactQuery/axios/msw）

发布于 2025-02-10 23:12:52 字数 2038 浏览 3 评论 0 原文

我正在尝试测试以下MSW休息端点的错误状态：

import { rest } from 'msw'

export const exceptionHandlers = [
  rest.post(config.accountApiUrl + '/login', (req, res, ctx) => {
    return res(
      ctx.status(500),
      ctx.json({ data: { message: 'Mock Error Message' } })
    )
  })
]

此端点在使用React Query的mutateSync中在自定义挂钩返回函数中调用：

  const { mutateAsync } = useMutation(AuthApi.login)

  const handleLogin = async (props): Promise<void> => {
    await mutateAsync(props, {
      onSuccess: async () => {
        // this block tests fine
      }
      onError: async () => {
        console.log('!!!')
        // it reaches this block, '!!!' is logged to the console,
        // but the test still fails with `Request failed with status code 500`
      }
    })
  }

   return handleLogin

测试文件中：

  it('handles network errors', async () => {
    mswServer.use(...exceptionHandlers)
    const user = userEvent.setup()
    const screen = render(<LoginForm />)
    const submitButton = screen.getByTestId('Login.Submit')
    // Complete form
    await user.click(submitButton)
  })

这无关

Request failed with status code 500

      at createError (node_modules/axios/lib/core/createError.js:16:15)
      at settle (node_modules/axios/lib/core/settle.js:17:12)
      at XMLHttpRequestOverride.onloadend (node_modules/axios/lib/adapters/xhr.js:54:7)
      at XMLHttpRequestOverride.trigger (node_modules/@mswjs/interceptors/src/interceptors/XMLHttpRequest/XMLHttpRequestOverride.ts:176:17)
      at node_modules/@mswjs/interceptors/src/interceptors/XMLHttpRequest/XMLHttpRequestOverride.ts:354:16

在应该以状态500失败。这就是重点。如果将处理程序更改为返回另一个错误，则IE ctx.status（404），那么测试只是使用该错误代码失败。

我已经尝试过，但同样的事情会导致。我看到

原文

I am trying to test error states of the following MSW rest endpoint:

import { rest } from 'msw'

export const exceptionHandlers = [
  rest.post(config.accountApiUrl + '/login', (req, res, ctx) => {
    return res(
      ctx.status(500),
      ctx.json({ data: { message: 'Mock Error Message' } })
    )
  })
]

This endpoint is called in a custom hook return function thats using React Query's mutateAsync:

  const { mutateAsync } = useMutation(AuthApi.login)

  const handleLogin = async (props): Promise<void> => {
    await mutateAsync(props, {
      onSuccess: async () => {
        // this block tests fine
      }
      onError: async () => {
        console.log('!!!')
        // it reaches this block, '!!!' is logged to the console,
        // but the test still fails with `Request failed with status code 500`
      }
    })
  }

   return handleLogin

In a test file:

  it('handles network errors', async () => {
    mswServer.use(...exceptionHandlers)
    const user = userEvent.setup()
    const screen = render(<LoginForm />)
    const submitButton = screen.getByTestId('Login.Submit')
    // Complete form
    await user.click(submitButton)
  })

It doesnt matter what comes after that, the test always fails with

Request failed with status code 500

      at createError (node_modules/axios/lib/core/createError.js:16:15)
      at settle (node_modules/axios/lib/core/settle.js:17:12)
      at XMLHttpRequestOverride.onloadend (node_modules/axios/lib/adapters/xhr.js:54:7)
      at XMLHttpRequestOverride.trigger (node_modules/@mswjs/interceptors/src/interceptors/XMLHttpRequest/XMLHttpRequestOverride.ts:176:17)
      at node_modules/@mswjs/interceptors/src/interceptors/XMLHttpRequest/XMLHttpRequestOverride.ts:354:16

But its supposed to fail with status 500. That's the whole point. If I change the handler to return another error, ie ctx.status(404), then the test just fails with that error code.

I've tried wrapping the assertion in a try/catch block but the same thing results. I see examples online of people doing (apparently) exactly this and it works fine, so I'm quite confused what's causing this. All other tests that check success states work as expected.