Question

我正在尝试使用MemoryRouter测试组件，如设置了初始条目的React-router文档中所示，这样我就可以在包装的组件内部使用参数。

组件示例：

render () {
  console.log(this.props.match.params.item)
}

在应用程序中（正常工作）：

<Router>
  <Switch>
    <Route exact path='/' render={() => (
      <Redirect to={`/${guessLocale()}`} />
    )} />
    <Route exact path='/:lang' component={Home} />
    <Route exact path='/:lang/:itemName' component={Vidactic} />
  </Switch>
</Router>

在测试中（从酶装载，未定义匹配）：

mount(<MemoryRouter initialEntries={['/fr/pamp']}>
  <Vidactic />
</MemoryRouter>)

所以我使用了这种解决方法，但是为什么initialEntries本身不能工作？

mount(<MemoryRouter initialEntries={['/fr/pamp']}>
  <Vidactic match={{ params: { item: 'pamp' } }} />
</MemoryRouter>)

Answer 1

您的测试中没有Route，因此不会进行匹配，并且this.props.match的{{1}}不确定。添加路线应使其起作用：

Vidactic

为避免重复路由，您可能希望将mount( <MemoryRouter initialEntries={['/fr/pamp']}> <Route exact path="/:lang/:itemName" component={Vidactic} /> </MemoryRouter> );部分放在单独的组件中，并在测试中使用它。

开玩笑：react-router测试返回未定义的“ params”

1 个答案: