javascript – React-router：使用酶在`render` prop中进行测试

2023年1月16日 193次阅读

我想测试从/ path到语言环境路径的重定向(例如/ en).所以这是组件的样子：

// GuessLocale is imported from a helper
const App = () => (
<Router>
  <Switch>
    <Route exact path='/' render={() => (
      <Redirect to={`/${guessLocale()}`} />
    )} />
    <Route exact path='/:lang' component={Home} />
  </Switch>
</Router>
)

这是目前的测试功能：

it('redirects to a localed path', () => {
  const wrapper = mount(
    <MemoryRouter initialEntries={['/']}>
      <App />
    </MemoryRouter>
  )

  expect(wrapper.find('Redirect')).toHaveLength(1)
})

显然,测试失败,因为Redirect组件在子项内部作为Route的render prop的函数

在测试中,我将App包装在内存路由器中,但在App组件中,浏览器路由器已经存在,所以我可能需要重构它.

但即使在Routes组件中分割的路由,我也不知道如何在渲染道具中进行测试.

最佳答案 您可以通过检查重定向后应该呈现的组件来测试这一点,在这种情况下,Home组件如下所示：

it('redirects to a localed path', () => {
  let wrapper = mount(
    <MemoryRouter initialEntries={['/']}>
      <Switch>
        <Route exact path='/' render={() => (
          <Redirect to={`/en`} />
        )} />
        <Route path='/en' component={Home} />
        <Route render={() => "not found"} />
      </Switch>
    </MemoryRouter>
  )



  expect(wrapper.find(Home)).toHaveLength(1)
})

我不得不删除< Router>因为我们没有将它用于浏览器,所以能够正常工作.另一种方法是检查< Route>位置prop内的pathname属性.看这里：

it('redirects to a localed path', () => {
  let wrapper = mount(
    <MemoryRouter initialEntries={['/']}>
      <Switch>
        <Route exact path='/' render={() => (
          <Redirect to={`/en`} />
        )} />
        <Route path='/en' component={Home} />
        <Route render={() => "not found"} />
      </Switch>
    </MemoryRouter>
  )



  expect(wrapper.find("Route").prop('location').pathname).to.equal("/en")
})
点赞