typescript - 用玩笑酶测试 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);
});
});
解决方案
推荐阅读
- ruby-on-rails - 具有多语言响应的 Rails Json
- angular - 当未从建议的选项中选择项目时,如何在多个自动完成组件中清除并显示错误
- c# - 带有 Angular 6 的 .Net Framework 4.5 中的 CORS 问题
- r - 使用 vapply 分配新的数据框值
- java - 如何从值中对值进行排序
在数组列表中? - events - 如何使用 Microsoft Graph 更新日历事件
- android - React Native:当使用 zIndex 绝对定位时,TouchableOpacity onPress 不会触发
- kotlin - 将反射“类型”投射到列表中
在科特林 - c# - 通过移动其 X 和 Z 位置,使沿 Y 轴移动的对象在某个点上保持静止
- algorithm - 绘制给定区域的像素圆