如何测试调用api的函数？答案

【问题标题】：How to test function which call api?如何测试调用api的函数？
【发布时间】：2021-06-01 23:25:31
【问题描述】：

如何测试调用 get API 并输出响应的函数。我试过了，但我能够测试处于状态的初始数据，但我想知道如何测试调用 API 时更新初始状态的函数。

代码示例我尝试过的内容。 CodeSandboxLink : [testing code]1

上下文 API

这里我调用了函数userDataFunc，它在上下文中，初始数据存储在状态userData

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

export const globalC = createContext();

export class Gprov extends Component {
  state = {
    userData: []
  };
  componentDidMount() {}

  userDataFunc = async () => {
    await axios(`https://jsonplaceholder.typicode.com/users`)
      .then((res) => {
        if (res.status === 200) {
          this.setState({
            userData: res.data
          });
        }
      })
      .catch((err) =>
        this.setState({
          userDataerror: err
        })
      );
  };

  render() {
    return (
      <globalC.Provider
        value={{
          ...this.state,
          userDataFunc: this.userDataFunc
        }}
      >
        {this.props.children}
      </globalC.Provider>
    );
  }
}

上下文测试文件

在这里，我执行了一些测试，例如通过测试用例的初始状态值，但我无法测试该功能，谁能帮帮我。

import React from "react";
import { Gprov } from "./context";
import { create } from "react-test-renderer";
import { waitForElement, cleanup } from "@testing-library/react";
import axiosMock from "axios";

afterEach(cleanup)

describe("Context Page", async () => {
  const component = create(<Gprov />);
  const instance = component.getInstance();

  it("it updates dose correctly", () => {
    console.log("instance", instance);
    expect(instance.state.userData).toStrictEqual([]);
  });
  it("fetches data and display", async () => {});
});

【问题讨论】：

@streletss，你能帮帮我吗？

标签： reactjs jestjs react-testing-library react-context react-test-renderer

【解决方案1】：

我认为您应该通过使用它的组件上显示的内容来测试 API 调用。例如Dashboard。

这是我为Dashboard写的一个测试：

import React from "react";
import Dashboard from "./Dashboard";
import { Gprov } from "./context";
import { render, waitFor } from "@testing-library/react";
import axios from "axios";
import "@testing-library/jest-dom/extend-expect";

jest.mock("axios");

afterEach(() => {
  jest.clearAllMocks();
});

it("displays user name in dashboard", async () => {
  axios.mockResolvedValue({ data: { id: 1, name: "John" }, status: 200 });
  const { getByText } = render(
    <Gprov>
      <Dashboard />
    </Gprov>
  );
  await waitFor(() => expect(getByText("John")).toBeInTheDocument());
});

我让它通过了我用create-react-app 创建的一个新项目，并通过稍微修改你的Gprov 和Dashboard 组件，这里是代码：

export class Gprov extends Component {
  state = {
    userData: [],
  };
  componentDidMount() {}

  userDataFunc = async () => {
    await axios(`https://jsonplaceholder.typicode.com/users`)
      .then((res) => {
        if (res.status === 200) {
          this.setState({
            userData: [...this.state.userData, res.data],
          });
        }
      })
      .catch((err) => {
        this.setState({
          userDataerror: err,
        });
      });
  };

  render() {
    return (
      <globalC.Provider
        value={{
          ...this.state,
          userDataFunc: this.userDataFunc,
        }}
      >
        {this.props.children}
      </globalC.Provider>
    );
  }
}

export default function Dashboard() {
  const { userDataFunc, userData } = useContext(globalC);

  useEffect(() => {
    userDataFunc();
  }, []);

  return (
    <div
      style={{ height: "100vh", backgroundColor: "#ea2345" }}
      className="d-flex justify-content-center align-items-center"
    >
      <div
        style={{
          overflowY: "auto",
          margin: "4px",
          border: "2px solid",
          padding: "12px",
          height: "80vh",
        }}
      >
        {userData &&
          userData.map((i) => {
            return (
              <h5 key={i.id} style={{ color: "#fff" }}>
                {i.name}
              </h5>
            );
          })}
      </div>
    </div>
  );
}

【讨论】：