How to test function which call api?

Question

How to test a function which call get API and output a response. I tried but I am able to test initial data which is in state , but I want to know how to test the function which updates the initial state when the API is called .

code Example what I have Tried. CodeSandboxLink : [testing code]1

Context API

Here I have called the function userDataFunc which is in context and initial data is stored in state 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>
    );
  }
}

context Test File

Here I have performed some test such as initial state value which passes the test cases but i not able to test the function can anyone help me out .

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 () => {});
});

Answer 1

I think you should test the API call through what is displayed on the components that use it. For example Dashboard.

Here is a test I wrote for 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());
});

I made it pass in a new project I created with create-react-app, and by slightly modifying your Gprov and Dashboard components, here is the code:

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>
  );
}