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

Question

我正在尝试测试以下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)，那么测试就会失败，错误代码。

我试过在try/catch块中包装断言，但结果相同。我在网上看到人们这样做的例子(显然)，它工作得很好，所以我很困惑是什么导致了这一点。检查成功状态的所有其他测试均按预期工作。

Answer 1

我遇到过同样的问题。

据我所知，问题是在测试环境中没有拒绝承诺的处理程序。

https://github.com/TanStack/query/issues/4109