ReactJS Jest 酶单元测试 axios.get() axios.post()答案

【问题标题】：ReactJS Jest enzyme unit testing axios.get() axios.post()ReactJS Jest 酶单元测试 axios.get() axios.post()
【发布时间】：2021-03-14 02:30:19
【问题描述】：

我的代码是这样的

constructor(props) {
  super();
  this.state = {
    isLoading: true,
    questionsData: [],
    studyCategoryList: [],
    studyList: [],
    filteredStudyList: [],
    selectedStudyCategory: "0",
    selectedStudy: "0",
    filterData: [],
    deleteQuestionIndex: 0   
  };
}

在构造函数中，我正在初始化状态，并且我已经为下拉数据编写了下面的方法

componentDidMount() {
  this._isMounted = true;
  axios
    .get(url + "getAllQuestionsDropdownValues")
    .then((response) => {
      this.setState({ studyCategoryList: response.data[0],studyList: response.data[1] });
      // this.setState({ studyList: response.data[1] });
      // this.setState({ isLoading: false });
    })
    .catch((error) => {
      console.log(error);
      // this.setState({ isLoading: false });
    });

  this.getQuestionsData(this.state.selectedStudyCategory, this.state.selectedStudy);

  const selectAll = "0";
  this.state.selectedStudyCategory = selectAll;
  this.state.selectedStudy = selectAll;
}

基于下拉选择，发布下拉选择的数据并从数据库中获取过滤后的数据。找到下面的发布方法。

getQuestionsData = (scid, sid) => {
  this.setState({ isLoading: true });
  axios.post(`${url}getQuestionList`, { studycategoryid: scid, studyid: sid })
    .then((response) => {
      this.setState({ questionsData: response.data, filterData: response.data });
    })
    .catch((error) => {
      this.setState({ isLoading: false });
    });
}

在使用 axios 编写 uint 测试用例时，我无法在 axios get 和 post 方法上使用 jest 酶编写测试用例。

请提供完整的例子来实现它。

提前致谢

【问题讨论】：

您尝试了什么，什么没有奏效？请列出确切的错误，而不是描述它们。 请提供完整的例子来实现它 - 所以不是代码编写服务。对于其他用户来说，为您的代码提出修复建议比从头开始编写更容易、更有用。
我推荐axios-mock-adapter

标签： reactjs unit-testing jestjs enzyme

【解决方案1】：

为了测试 axios 请求，你需要使用jest-mock-axios library。

> npm i --save-dev jest-mock-axios

文档清楚地说明了要遵循的步骤，在此处（部分）复制：

接下来你需要为 Axios 设置一个手动的 Jest mock：

在您的项目根目录中创建__mocks__ 目录
在这个新目录中创建一个名为axios.js 的文件
将以下 sn-ps 复制并粘贴到 axios.js 文件中

// ./__mocks__/axios.js
import mockAxios from 'jest-mock-axios';
export default mockAxios;

然后，这是一个基本的测试文件示例，用于测试您的 axios.post 请求：

import mockAxios from 'jest-mock-axios';
import { mount } from 'enzyme';
import YourComponent from '../src/YourComponent';
 
afterEach(() => {
    // cleaning up the mess left behind the previous test
    mockAxios.reset();
});
 
it('YourComponent should get data', () => {
    mockAxios.mockResponse({ data : <your_mocked_data> });
 
    // using the component, which should make a server response
    let clientMessage = 'client is saying hello!';

    mount(<YourComponent>);
 
    // since `get` method is a spy, we can check if the server request was correct
    // a) the correct method was used (get)
    // b) went to the correct web service URL ('/<your_service_url>/')
    // c) if the payload was correct (<your_mocked_data>)
    expect(mockAxios.get).toHaveBeenCalledWith('/<your_service_url>/', {data: <your_mocked_data> });
});

post 测试应该看起来一样。

查看docs了解更多详情！

【讨论】：