问:模仿useHistory并期待toBeCalledWith是什么意思?如何实现?
答:模仿useHistory并期待toBeCalledWith是指在测试过程中,我们可以模拟React Router中的useHistory钩子,并期望其内部的push或replace函数被调用时,传入特定的参数进行断言。这样我们可以验证页面跳转或替换时是否传入了正确的参数。
为了实现这个目标,我们可以创建一个模拟的useHistory函数,它返回一个包含push和replace函数的对象。然后,我们可以使用jest.fn()来创建一个mock函数,用于跟踪push或replace函数是否被调用以及传入的参数。最后,在测试中,我们可以通过jest的toBeCalledWith函数来验证mock函数是否被特定参数调用。
以下是一个示例代码:
// 模拟useHistory函数
const useHistoryMock = () => {
const pushMock = jest.fn();
const replaceMock = jest.fn();
return {
push: pushMock,
replace: replaceMock,
};
};
// 在测试中使用模拟的useHistory函数
it('should call push with specific parameter', () => {
const history = useHistoryMock();
// 使用模拟的useHistory函数
jest.mock('react-router-dom', () => ({
useHistory: () => history,
}));
// 运行待测试的代码
render(<MyComponent />);
// 断言push函数被调用,并期待传入特定参数
expect(history.push).toBeCalledWith('/path');
});
以上代码示例中,我们首先创建了一个模拟的useHistory函数useHistoryMock,该函数返回一个包含push和replace函数的对象。然后,我们使用jest.mock来模拟react-router-dom库中的useHistory函数,使其返回我们的模拟函数。最后,在待测试的代码中调用push函数后,我们使用expect来断言push函数是否被调用,并期待传入特定的参数'/path'。
这样,通过模拟useHistory函数并使用mock函数来进行断言,我们可以在测试中模拟页面跳转或替换,并验证传入参数的正确性。
领取专属 10元无门槛券
手把手带您无忧上云