使用withRouter和connect,可以在酶中断言调用了history.push的方式如下:
import { withRouter } from 'react-router-dom';
class YourComponent extends React.Component {
// ...
}
export default withRouter(YourComponent);
import { shallow } from 'enzyme';
import { createMemoryHistory } from 'history';
// 导入你的组件
import YourComponent from './YourComponent';
describe('YourComponent', () => {
it('should call history.push when something happens', () => {
const history = createMemoryHistory();
const pushMock = jest.fn();
history.push = pushMock;
// 使用shallow渲染组件
const wrapper = shallow(<YourComponent />, {
context: { router: { history } },
});
// 模拟触发某个事件或条件
// ...
// 断言history.push被调用
expect(pushMock).toHaveBeenCalledWith('/your-path');
});
});
在这个例子中,我们使用了enzyme的shallow函数来浅渲染组件,并通过context属性传递了模拟的history对象。然后,我们创建了一个mock函数pushMock来模拟history.push方法,并将其赋值给history对象。最后,在断言部分,我们使用expect语句来验证history.push是否被调用,并传入了预期的路径参数。
需要注意的是,这里使用了createMemoryHistory来创建一个内存中的history对象,以便在测试中模拟路由的跳转。另外,如果你的组件中使用了connect函数来连接Redux的状态和操作,也需要确保在测试文件中正确地配置Provider和store。
希望以上内容能够帮助到你!如果有任何疑问,请随时提问。
领取专属 10元无门槛券
手把手带您无忧上云