测试错误响应时,测试失败,出现预期错误(React/Jest/ReactQuery/Axios/MSW)

ht4b089n  于 2022-11-05  发布在  iOS
关注(0)|答案(1)|浏览(124)

我正在尝试测试以下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的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

在测试文件中:

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。这就是全部的要点。如果我改变处理程序返回另一个错误,即ctx.status(404),那么测试就会失败,并返回该错误代码。
我试过wrapping the assertion in a try/catch block,但结果是一样的。我看到examples online的人(显然)就是这样做的,它工作得很好,所以我很困惑是什么导致了这个结果。所有其他检查成功状态的测试都按预期工作。

yks3o0rb

yks3o0rb1#

我也有同样的问题。
就我所能理解的,问题是在测试环境中没有被拒绝的承诺的处理程序。
https://github.com/TanStack/query/issues/4109

相关问题