从模块模拟的 jest 函数在被其他方法调用时不会检测到它的调用

Question

我正在这里测试我的自定义钩子。如果signIn方法被调用，那么它在任何情况下都会调用history.push。

// Test.js
import myHandler from "./useMyHandler";
import { renderHook, act } from "@testing-library/react-hooks";

const mockhistoryPush = jest.fn();
jest.mock("react-router-dom", () => ({
...jest.requireActual("react-router-dom"),
useHistory: () => ({
push: mockhistoryPush,
}),
}));

describe("auth handler hook", () => {
it("calls signin method and check user type", async () => {
const { result } = renderHook(() => useAuthHandler());
const { signIn } = result.current;
signIn("username", "1234");
expect(Auth.signIn).toBeCalledTimes(1);
expect(mockhistoryPush).toBeCalled();
});
});

逻辑是

const redirectToMain = () => {
history.push("/main");
};

const signIn = async (username, pwd) => {
let user = await Auth.signIn(username, pwd);
// work with user
redirectToMain();
};

我以为expect(mockhistoryPush).toBeCalled();是真的，但实际上它并没有说

expect(jest.fn()).toBeCalled()
Expected number of calls: >= 1
Received number of calls:    0

它肯定达到了redirectToMain的功能，甚至console.log(history(显示历史是模拟功能。

我在这里做错了什么？

Answer 1

我刚刚发现，如果代码导致状态更改，则应该使用actAPI进行包装。

由于我的登录函数返回Promise，它必须像一样

it("calls signin method and check user type", async () => {
const { result } = renderHook(() => useAuthHandler());
const { signIn } = result.current;
await act(async () => {
await signIn("username", "1234");
});
expect(Auth.signIn).toBeCalledTimes(1);
expect(mockhistoryPush).toBeCalled();
});

现在它运行良好。希望它能帮助到有同样问题的人。