模拟 Axios 到 test.catch()

Question

我一直在尝试编写测试来测试 axios 调用，但现在需要测试catch部分。

我已经能够像这样通过 mocking axios 做 then 但似乎无法找到测试捕获的方法。 我遵循了堆栈溢出和 web 中的许多不同示例。

jest.mock('axios', () => jest.fn(() => Promise.resolve({ data: mockData })));

但这总是会返回一个好的结果，所以无法测试捕获量。 我要测试的代码是： goToUrl()只是一个window.location.assign(url)但已导入。

fetchBundlesFromApi(params)
  .then(({ data: { bundles } }) => {
    updateBundles(bundles);
    this.setState({ showUpdatingPrices: false });
  })
  .catch(() => goToUrl(bundlesUrl));

在我对.then()部分的测试中，我这样做：

const fetchedBundles = await fetchBundlesFromApi(
  '?params',
);
expect(fetchedBundles.data).toEqual(mockData);

但是，如果我按照这样的示例Mocking Axios 和 React 中的 Jest - 模拟 function 没有被调用，如果我将模拟get文件放在文件夹__mocks__中，那么很多测试服都失败了，所以我只想在这个测试文件中模拟它。

这是我尝试做的例子之一：

    jest.mock('axios', () => ({
  get: () => jest.fn(() => Promise.resolve({ data: mockData })),
  default: () => jest.fn(() => Promise.resolve({ data: mockData })),
}));

但是TypeError: (0, _axios.default) is not a function

编辑：

这是我的 fetchBundlesApi function：

const fetchBundlesFromApi = params => axios(`${bundleRoute}/bundles${params}`);

编辑：捕捉测试

    it('should redirect if api fails', async () => {
    const networkError = new Error('Some network error');
    axios.mockRejectedValueOnce(networkError);
    const goToUrl = jest.fn();
    let error;

    try {
      await fetchBundlesFromApi('?params');
    } catch (err) {
      error = err;
    }

    expect(error).toEqual(networkError);
    expect(goToUrl).toHaveBeenCalled();
  });

在我的组件中，我像这样导入goToUrl ：

import { goToUrl } from 'Helpers';

Answer 1

您可以利用 Jests 的能力在它们运行后弹出实现，即mockImplementationOnce和朋友。

import axios from 'axios';

jest.mock('axios');

// default implementation
axios.get.mockResolvedValue(mockedData);

describe('#fetchBundlesFromApi', () => {
  it('returns data from API', async () => {
    const fetchedBundles = await fetchBundlesFromApi('?params');
    expect(fetchedBundles.data).toEqual(mockData);
  });
  it('redirects on failure', () => {
    // override behaviour for this one call
    axios.get.mockRejectedValueOnce();
    // verify your failure test
  });
});

Answer 2

我使用https://mswjs.io/docs/按照此博客https://medium.com/testing-nuxt-applications/testing-backend-communication-84a5bf02ae10中的步骤进行操作（实际上链接到这个How to Axios 与 Jest？ ）

特别是关于测试捕获的问题，像这样模拟响应

         return response(
            context.status(400),
            context.json({ non_field_errors: 'Wrong password' })
          )