使用 react-router v4 测试已安装的组件答案

【问题标题】：Testing mounted components with react-router v4使用 react-router v4 测试已安装的组件
【发布时间】：2017-06-28 13:43:44
【问题描述】：

我正在将我们的应用程序迁移到 react-router@4.x，但在获取使用 enzyme 的 mount 函数的测试时遇到了麻烦。

每当我挂载一个包含withRouter-wrapped 子组件的组件时，我都会遇到麻烦。

这是我正在测试的简化情况的示例：

class SomePage extends React.Component {
  componentDidMount() {
    this.props.getData();
  }
  render() {
    return (
      <div>
        <ComponentWrappedInWithRouter />
      </div>
    );
  }
}

const Component = (props) => (
  <button onClick={() => this.props.history.push('/new-route') }>
    Click to navigate
  </button>
);

const ComponentWrappedInWithRouter = withRouter(Component);

现在，我想测试 SomePage 在安装后调用它的 prop getData。愚蠢的例子，我知道，但结构应该足够了。

每当我编写使用enzyme 的mount 的测试时，我都会收到以下错误：

TypeError: Cannot read property 'route' of undefined
  at Route.computeMatch (node_modules/react-router/Route.js:68:22)
  at new Route (node_modules/react-router/Route.js:47:20)

现在，我认为发生这种情况的原因是因为我尝试为上下文中没有 router 的组件调用 withRouter - 即它没有被包裹在 <BrowserRouter /> 或其兄弟姐妹中。

这不是react-router@3.x 的问题，但是由于当前的专业是完全重写的，我完全理解这些问题会出现。

关于如何解决此问题的任何想法？

【问题讨论】：

标签： reactjs testing react-router enzyme

【解决方案1】：

非常简单：将您正在测试的组件包装在来自react-router-dom 的MemoryRouter 中，您就可以开始了。

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/MemoryRouter.md

【讨论】：

这种方法的问题是您无法再访问正在测试的组件的状态。所以它有点工作 - 但不是真的。还有，感觉很不对劲！ ^^
这是为什么呢？您可以使用find 深入了解您安装的组件，因为您使用的是mount 而不是shallow。当然，我可能会遗漏一些东西，不清楚你原来的问题是什么意思:)
如果我使用mount(...).find('SomePage').state()，我会收到一条错误消息，告诉我我只能访问根组件的状态 - 即 - 已安装的组件。当用MemoryRouter 包装东西时，这将是根组件。尝试使用 dive 和 find 进入 SomePage 并尝试重新安装它 - 只是无法让它工作。
你到底想测试什么？我从来不需要窥视组件中的“状态”。您不应该根据需要简单地更新状态并验证预期的输出吗？您的问题最初是关于解决路由器问题，但也许真正的问题是其他问题。
在大量场景中测试组件的状态可能是有意义的——但正如你所说，这超出了这个问题的范围。添加<MemoryRouter /> 确实有效 - 所以我现在会接受你的回答:)