我正在使用 enzyme 。我需要测试一个将 React router Link 作为子组件的组件。我需要以下内容
- 使用 enzyme 的 mount() 挂载组件，因为我需要测试整个组件树
- 测试组件属性更改时的行为。
我无法使用 StaticRouter 或 MemoryRouter 包装我的组件，因为 enzyme 只允许在根级别使用 setProps()。
我当前的解决方案是使用 sinon 来 stub Link 渲染方法。这是一个简短的示例。
import {Link} from 'react-router-dom';
import sinon from 'sinon';
// ....
// ....
describe('test',() => {
before(() => {
sinon.stub(Link.prototype, 'render').callsFake(function reactRouterLinkRender() {
const {innerRef, replace, to } = this.props;
const _props = {href: to, ref: innerRef, replace, onClick: this.handleClick};
return (<a {..._props}>this.props.children</a>);
});
});
});
是否有更好的方法来避免错误“不变违规:您不应在路由器外部使用链接”？
谢谢
最佳答案
不确定这是否对任何人有帮助，但就我而言，我设法通过浅层渲染顶级组件然后使用 div() 来获取我需要的部分。
loginPage = shallow(<LoginPage />);
...
loginPage.find(LoginForm).dive().find({name:"user"}).simulate("change", userEventMock);
关于reactjs - 测试包含 React Router Link with Enzyme 的组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46516344/