React Router 4 和酶答案

【问题标题】：React Router 4 and enzymeReact Router 4 和酶
【发布时间】：2017-10-24 10:11:54
【问题描述】：

我已经切换到 react 路由器 v4 并且需要重新实现一些测试。我有以下情况：

这在旧路由器上相当容易......但在新路由器上就很难了：

如果组件（或子组件）包含例如Link，这意味着我们必须提供适当的contxt 来渲染组件。这就是创建MemoryRouter 的原因：

const comp = mount(
      <MemoryRouter>
        <Comp {...someProps} />
      </MemoryRouter>
    );
//here comes assertion about spy getting called

感谢我们能够渲染组件（更多信息：https://reacttraining.com/react-router/web/guides/testing）但是..如果我们看一下酶库中的setProps方法（http://airbnb.io/enzyme/docs/api/ReactWrapper/setProps.html）：

设置根组件的 props 并重新渲染的方法。

这意味着如果我调用 comp.setProps({..newProps})，它实际上会更改路由道具 (MemoryRouter)，但不会更改我的组件道具，这太糟糕了。

对此类案例有何见解？

【问题讨论】：

【解决方案1】：

您可以围绕 MemoryRouter 编写包装器并将所有道具传递给需要测试的节点。

const CompWrappedWithMemoryRouter = (props) => {
    return (
        <MemoryRouter>
            <Comp {...props />
        </MemoryRouter>
    )
}

然后当然使用它

const comp = mount(
      <CompWrappedWithMemoryRouter {...someProps} />
    );

现在comp.setProps 应该可以工作了

【讨论】：