javascript - 模拟 Axios 来测试 .catch()

标签 javascript reactjs jestjs axios

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

我已经能够通过像这样模拟 axios 来做到这一点,但似乎无法找到测试 catch 的方法。我遵循了来自堆栈溢出和网络的许多不同示例。

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 with Jest in React - mock function not being called如果我将模拟 axios 文件放入文件夹 __mocks__ 中,则我无法手动模拟 get 那么很多测试套件都会失败,所以我只想在这个中模拟它测试文件。

这是我尝试做的示例之一:

    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 函数:

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:

从“Helpers”导入 { goToUrl };

最佳答案

您可以利用 Jests 功能在运行后弹出实现,即 mockImplementationOnce和 friend 们。

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
  });
});

关于javascript - 模拟 Axios 来测试 .catch(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58747896/

相关文章:

lodash - Jest 不解析 lodash 导入

javascript - 基于鼠标移动的 HTML5 平移

javascript - 单选按钮的计算

javascript - 如何在单击事件后更改 session 值,以便页面刷新不会重置 Meteor 上的 session

javascript - 定期触发 React 效果

jestjs - Jest 和 Parcel 的 ES6 导入错误

javascript - 使用正则表达式获取函数内容

javascript - 动态添加输入表单字段问题reactjs

javascript - 在 css 中通过 Eslint 提交时出现错误

javascript - React Native - Jest.mock 必须是内联函数。测试使用 'withNavigation' 的组件时出现问题