如果你在使用 Jest 测试你的 React 应用时遇到了
this.props.history.push is not a function
的错误提示,那么可能是因为在测试代码中没有正确的模拟(mock)
history
对象。
在 React 应用中,通常使用
react-router-dom
提供的
BrowserRouter
或
HashRouter
组件来进行路由控制。这些组件会在应用的上下文中提供
history
对象,供应用代码中的组件调用
push
、
replace
等方法来进行路由跳转。
在测试代码中,为了模拟这个
history
对象,可以使用
react-router-dom
提供的
MemoryRouter
组件,然后手动将
history
对象注入到测试组件的 props 中。
例如,你可以这样写一个测试用例:
import { MemoryRouter } from 'react-router-dom';
import { mount } from 'enzyme';
import MyComponent from './MyComponent';
describe('MyComponent', () => {
it('should navigate to /path when button is clicked', () => {
const historyMock = { push: jest.fn() };
const wrapper = mount(
<MemoryRouter>
<MyComponent history={historyMock} />
</MemoryRouter>
wrapper.find('button').simulate('click');
expect(historyMock.push).toHaveBeenCalledWith('/path');
在这个例子中,我们使用 MemoryRouter
来提供 history
对象,然后将这个对象注入到 MyComponent
组件的 props 中。在测试用例中,我们可以模拟用户点击按钮后的行为,并断言 history.push
方法被正确地调用了。
希望这个解答能够帮助你解决问题,如果你还有其他疑问,可以继续提问。