React Router 4 和酶

Posted 2023-02-21

【中文标题】React Router 4 和酶

【英文标题】：React Router 4 and enzyme

【发布时间】：2017-10-24 10:11:54

【问题描述】：

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

安装组件（检查是否调用了methodA） 通过酶包装方法更改道具：setProps 检查方法是否被调用了两次

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

如果组件（或子组件）包含例如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 应该可以工作了