我试图在react-router
上的新useHistory
钩子中使用@testing-library/react
来模拟history.push
。我只是模仿了模块,就像这里的第一个答案一样:How to test components using new react router hooks?
所以我在做:
//NotFound.js
import * as React from 'react';
import { useHistory } from 'react-router-dom';
const RouteNotFound = () => {
const history = useHistory();
return (
<div>
<button onClick={() => history.push('/help')} />
</div>
);
};
export default RouteNotFound;
//NotFound.test.js
describe('RouteNotFound', () => {
it('Redirects to correct URL on click', () => {
const mockHistoryPush = jest.fn();
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useHistory: () => ({
push: mockHistoryPush,
}),
}));
const { getByRole } = render(
<MemoryRouter>
<RouteNotFound />
</MemoryRouter>
);
fireEvent.click(getByRole('button'));
expect(mockHistoryPush).toHaveBeenCalledWith('/help');
});
})
mockHistoryPush
不叫...我做错了什么?
5条答案
按热度按时间crcmnpdw1#
在模块范围内使用
jest.mock
将自动提升到代码块的顶部。这样你就可以在NotFound.jsx
文件和你的测试文件中获得模拟版本react-router-dom
。此外,我们只想模拟
useHistory
钩子,所以我们应该使用jest.requireActual()
来获取原始模块,并将其他方法保留为原始版本。解决方案如下:
NotFound.jsx
:NotFound.test.jsx
:100%覆盖率的单元测试结果:
原始程式码:https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/58524183
icnyk63a2#
实际上,您不需要模拟
react-router-dom
(至少对于v5),因为它提供了一系列测试工具:https://v5.reactrouter.com/web/guides/testing要检查您的历史记录是否实际更改,您可以使用
createMemoryHistory
并检查其内容:x6h2sr283#
假设您已经在Order.JSx中创建了File方法来执行单击事件。如果你检查我正在使用
const history = useHistory();
现在在OrdersTest.js中
ijxebb2r4#
对于任何使用
react-router-dom
V4的人来说,this对我来说都很有效:blmhpbnm5#
这可能会有帮助。您可以使用**jest.fn()**来模拟history.push()。