首页 > 解决方案 > 用玩笑酶测试 axios 发布请求

问题描述

我想测试 axios 发布请求。我正在使用 Jest,酶。我嘲笑 axios 并期望函数 setData 被调用两次,但是测试失败了。如果控制台输出显示测试到达此块,为什么不第二次调用该函数? 包.json

"@types/jest": "^26.0.14",
"jest-junit": "^12.0.0",
"axios": "^0.21.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.6",
"jest-react-hooks-shallow": "^1.4.2",
"typescript": "^3.9.7",

请求.ts

import axios from "axios";
import { v4 as uuid } from "uuid";
import store from "../store/store";
import { errorProcessing } from "./error-processing";
import { Response, ResponseError } from "./shared/common/response";
import { prepareData } from "../utils/data";
import { Graph } from "./shared/common/graph";
import { Method } from "../constants/methods";

const createJsonRpcPayload = <P>(method: Method, params: P) => {
  const id = uuid();
  const jsonrpc = "2.0";

  return { jsonrpc, id, method, params };
};

export const fetchData = <D, R, P>(
  method: Method,
  setData: React.Dispatch<React.SetStateAction<Graph<D>>>,
  data: Graph<D>,
  params: P | {} = {},
): void => {
  const url = process.env.REACT_APP_RECSYS_API_URL || "";
  const payload = createJsonRpcPayload(method, params || {});
  const accessToken = store.getState().oidc?.user?.access_token;

  setData({ ...data, isLoading: true });

  axios.defaults.headers.common["Authorization"] = accessToken ? `Bearer ${accessToken}` : "";

  axios
    .post(url, payload)
    .then((response: Response<R>) => {
      if (response.status === 200) {
        const result = response?.data?.result;
        const errorCode = result?.errorCode;
        if (!errorCode) {
          console.log("result.data", result.data);
          setData({
            data: prepareData(method, result?.data) as D,
            name: result?.name,
            error: {
              type: "",
              text: "",
            },
            isLoading: false,
          });
        } else {
          throw { response };
        }
      }
    })
    .catch((error: ResponseError<R>) => errorProcessing(error, setData, data));
};

请求.test.ts

import { fetchData } from "../api/requests";
import axios from "axios";
import { Method } from "../constants/methods";
jest.mock("axios");

beforeEach(() => jest.clearAllMocks());

const mockedAxios = axios as jest.Mocked<typeof axios>;
const setData = jest.fn();
const graph = { name: "name", isLoading: false, data: [1, 2, 3], error: { text: "", type: "" } };

describe("fetchData", () => {
  test("good response", () => {
    mockedAxios.post.mockResolvedValue({
      status: 200,
      data: {
        result: {
          name: "name",
          data: [1, 2, 5],
        },
      },
    });
    fetchData(Method.RECSYS_STATISTICS, setData, graph);
    expect(setData).toBeCalledTimes(2);
  });
});

在此处输入图像描述

标签: typescriptunit-testingaxiosjestjsenzyme

解决方案


推荐阅读