我正在使用 axios 取消 token 在我的 useEffect Hook 中进行清理，如下所示。当我运行测试时，出现如下所示的错误。我正在使用 react 测试库和开 Jest 来测试我的应用程序。我还使用模拟服务 worker 来拦截和处理请求。有没有一种方法可以模拟 axios.CancelToken.source 调用来解决失败的测试？

UseEffect 钩子(Hook):

useEffect(() => {

 const source = axios.CancelToken.source()
 axios.get(URLS.GET_DATA,
  {
    cancelToken: source.token
  })
  .then(response => {
    setData(response.data)
  })
  .catch((error) => {
    if (axios.isCancel(error)) {
    } else {
      console.log('Handle Error')
    }
  })

return () => {
  source.cancel()
}

}, [building, numberOfDeletions, numberOfUpdates, numberOfAdds], [])

测试服务器服务 worker :

const server = setupServer(
rest.get('/api/data/'), (req, res, ctx) => {
return res(
  ctx.status(200),
  ctx.json({ data: data })
)})

失败测试:

it('should render title to page', () => {
const { getByText } = render(<EditIndex />)
const heading = getByText('Edit Items')

expect(heading.textContent).toEqual('Edit Items')
})

错误信息:

最佳答案

this中的第二个解决方案帖子对我有用。正如上面的评论所提到的，我已经在模拟 axios 并且我没有在模拟中定义 CancelToken 。我最终通过简单地传入 axios 来修改模拟，一切都通过了； CancelToken 不再是未定义的。

import axios from 'axios';
jest.mock('axios');

关于reactjs - 在 useEffect Hook 中使用 axios 取消 token 时如何修复失败的测试，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64430627/