使用jest在componentDidMount中反应测试axios get请求

npm install axios jest

import React, { Component } from "react";
import axios from "axios";

class MyComponent extends Component {
  componentDidMount() {
    axios.get("https://api.example.com/data")
      .then((response) => {
        console.log(response.data);
      })
      .catch((error) => {
        console.error(error);
      });
  }

  render() {
    return <div>My Component</div>;
  }
}

export default MyComponent;

import React from "react";
import axios from "axios";
import { render, unmountComponentAtNode } from "react-dom";
import { act } from "react-dom/test-utils";
import MyComponent from "./MyComponent";

let container = null;

beforeEach(() => {
  // 设置一个 DOM 元素作为渲染的容器
  container = document.createElement("div");
  document.body.appendChild(container);
});

afterEach(() => {
  // 清理渲染的组件实例
  unmountComponentAtNode(container);
  container.remove();
  container = null;
});

it("should call axios get method in componentDidMount", async () => {
  const mockData = { data: "mock data" };

  // 使用jest.spyOn来监听axios的get方法
  const axiosGetSpy = jest.spyOn(axios, "get").mockResolvedValueOnce(mockData);

  await act(async () => {
    render(<MyComponent />, container);
  });

  expect(axiosGetSpy).toHaveBeenCalled();
});