如何测试在 Context 内部创建并在其他组件中调用的 get/post需要参数API？

问题描述

我创建了一个从 API 获取数据并发送 userDetail 响应的函数，该响应已在上下文中创建。和功能已通过导入上下文在仪表板组件中调用。当用户点击按钮时，它会呈现 userData。

我尝试测试以检查函数是否在单击后被调用过一次。但无法实现。

上下文页面 这里创建了 userDataFunc。

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

export const Contx = createContext();

export class ConProvider extends Component {
  state = {
    userData: []
  };

  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() {
    console.log(this.state.coin);
    return (
      <Contx.Provider
        value={{
          ...this.state,userDataFunc: this.userDataFunc
        }}
      >
        {this.props.children}
      </Contx.Provider>
    );
  }
}

仪表板组件 这里函数和用户数据状态已经从上下文导入

import React,{ useContext } from "react";
import { Contx } from "../ContextApi";

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

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

仪表板测试文件

// import React from "react";
import { fireEvent,render } from "@testing-library/react";
import axiosMock from "axios";
import Dashboard from "./Dashboard";
import { Contx } from "../ContextApi";

jest.mock("axios");

it("Api Called",() => {
  const { getByTestId } = render(
    <Contx>
      <Dashboard />
    </Contx>
  );

  const renderButton = getByTestId("userData");
  fireEvent.click(renderButton);
  expect(Dashboard.userDataFunc()).toHaveBeenCalledTimes(1);
});

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）