时间戳

首页 > 解决方案 > 如何测试 axios 的成功和失败案例？

reactjs - 如何测试 axios 的成功和失败案例？

问题描述

我有一个反应应用程序。我正在使用 React-testing-library 进行测试。我正在尝试编写测试用例来涵盖我的 axios 失败案例，但无法做到。

为了测试，我创建了一个名为的文件夹src/__mocks__，其中包含一个名为“axios.js”的文件。里面的内容是——

export default {
    get: jest.fn(() => Promise.resolve({ data: "success" }))
};

在我的 component.test.js 测试文件中，我能够测试 axios 调用的成功场景。但不确定如何测试失败案例。内容是——

it("Test axios call", () => {
    axiosMock.get.mockResolvedValueOnce({
    data: { greeting: "hello there" }
    });
});

注意 - 我的组件内的 axios 调用位于

useEffect(()=>{
    axios.get('url')
    .then((res)=>{console.log(res)})
    .catch((err)=>{console.log(err)});
},[])

还要注意，我可以通过在 axios 模拟中将 Promise.resolve 更改为 Promise.reject 来测试失败案例。但是，在任何时候，我都可以测试任何一个，而不是两者！

标签： reactjsmockingjestjsaxiosreact-testing-library

解决方案

这是一个用 TypeScript 编写的解决方案。

要将其转换为 JavaScript，(axios as jest.Mocked<typeof axios>)请将axios任何ts对js.

index.ts：

import axios from 'axios';

function main() {
  return axios
    .get('url')
    .then(res => {
      console.log(res);
    })
    .catch(err => {
      console.log(err);
    });
}

export { main };

单元测试：

import axios from 'axios';
import { main } from './';

describe('main', () => {
  it('success', async () => {
    const spyOn = jest.spyOn(console, 'log');
    (axios as jest.Mocked<typeof axios>).get.mockResolvedValueOnce('success data');
    await main();
    expect(spyOn).toBeCalledWith('success data');
    spyOn.mockRestore();
  });

  it('error', async () => {
    const spyOn = jest.spyOn(console, 'log');
    (axios as jest.Mocked<typeof axios>).get.mockRejectedValueOnce(new Error('some error'));
    await main();
    expect(spyOn).toBeCalledWith(new Error('some error'));
    spyOn.mockRestore();
  });
});

__mocks__/axios.ts：

const axiosMocked = {
  get: jest.fn()
};
export default axiosMocked;

单元测试结果：

 PASS  src/stackoverflow/57835066/index.spec.ts
  main
    ✓ success (12ms)
    ✓ error (4ms)

  console.log node_modules/jest-mock/build/index.js:860
    success data

  console.log node_modules/jest-mock/build/index.js:860
    Error: some error
        at Object.<anonymous> (/Users/elsa/workspace/github.com/mrdulin/jest-codelab/src/stackoverflow/57835066/index.spec.ts:15:68)
        at step (/Users/elsa/workspace/github.com/mrdulin/jest-codelab/src/stackoverflow/57835066/index.spec.ts:32:23)
        at Object.next (/Users/elsa/workspace/github.com/mrdulin/jest-codelab/src/stackoverflow/57835066/index.spec.ts:13:53)
        at /Users/elsa/workspace/github.com/mrdulin/jest-codelab/src/stackoverflow/57835066/index.spec.ts:7:71
        at new Promise (<anonymous>)
        at Object.<anonymous>.__awaiter (/Users/elsa/workspace/github.com/mrdulin/jest-codelab/src/stackoverflow/57835066/index.spec.ts:3:12)
        at Object.<anonymous> (/Users/elsa/workspace/github.com/mrdulin/jest-codelab/src/stackoverflow/57835066/index.spec.ts:13:15)
        at Object.asyncJestTest (/Users/elsa/workspace/github.com/mrdulin/jest-codelab/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:102:37)
        at resolve (/Users/elsa/workspace/github.com/mrdulin/jest-codelab/node_modules/jest-jasmine2/build/queueRunner.js:43:12)
        at new Promise (<anonymous>)

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        1.066s

你可以在这里找到完整的 TypeScript 演示。

推荐阅读