如何使用 Jest 使用新的 React Router Hooks 模拟 history.push [英] How to mock history.push with the new React Router Hooks using Jest
问题描述
我正在尝试在 react-router
上的新 useHistory
钩子中模拟 history.push
并使用 @testing-library/反应
.我只是像这里的第一个答案一样嘲笑模块:How to test组件使用新的反应路由器钩子?
所以我在做:
//NotFound.jsimport * as React from 'react';从'react-router-dom'导入{useHistory};const RouteNotFound = () =>{const 历史 = useHistory();返回 (<div><button onClick={() =>history.push('/help')}/>
);};导出默认 RouteNotFound;
//NotFound.test.js描述('RouteNotFound',()=> {it('点击时重定向到正确的 URL', () => {const mockHistoryPush = jest.fn();jest.mock('react-router-dom', () => ({...jest.requireActual('react-router-dom'),useHistory: () =>({推:模拟历史推,}),}));const { getByRole } = 渲染(<MemoryRouter><RouteNotFound/></MemoryRouter>);fireEvent.click(getByRole('button'));期望(mockHistoryPush).toHaveBeenCalledWith('/help');});})
但是 mockHistoryPush
没有被调用...我做错了什么?
你实际上不需要模拟 react-router-dom
(至少对于 v5),因为它提供了一堆测试工具: https://v5.reactrouter.com/web/guides/testing
要检查您的历史记录是否实际更改,您可以使用 createMemoryHistory
并检查其内容:
从'react'导入React;从'@testing-library/react'导入{渲染,屏幕};从@testing-library/user-event"导入 userEvent;从'./Menu'导入{菜单};从历史"导入 { createMemoryHistory }从'react-router-dom'导入{路由器};test('触发路径改变', () => {const 历史 = createMemoryHistory();使成为(<路由器历史={历史}><菜单/></路由器>);const aboutItem = screen.getByText('About');期望(aboutItem).toBeInTheDocument();userEvent.click(aboutItem);期望(历史.长度).toBe(2);期望(history.location.pathname).toBe('/about');});
I am trying to mock history.push
inside the new useHistory
hook on react-router
and using @testing-library/react
. I just mocked the module like the first answer here: How to test components using new react router hooks?
So I am doing:
//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');
});
})
But mockHistoryPush
is not called... What am I doing wrong?
You actually do not need to mock react-router-dom
(at least for v5) as it provides a bunch of testing tools: https://v5.reactrouter.com/web/guides/testing
To check your history is actually changed, you can use createMemoryHistory
and inspect its content:
import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Menu } from './Menu';
import { createMemoryHistory } from 'history'
import { Router } from 'react-router-dom';
test('triggers path change', () => {
const history = createMemoryHistory();
render(
<Router history={history}>
<Menu />
</Router>
);
const aboutItem = screen.getByText('About');
expect(aboutItem).toBeInTheDocument();
userEvent.click(aboutItem);
expect(history.length).toBe(2);
expect(history.location.pathname).toBe('/about');
});
这篇关于如何使用 Jest 使用新的 React Router Hooks 模拟 history.push的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!