我想测试从/ 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")
})