Question

我有一个像这样的组件：

const App = () =>
    <BrowserRouter basename={basePath}>
        <div>
            <Header/>
            <Switch>
                <Route path="/" exact component={Dashboard}/>
                <Route path="/contact" component={ContactForm}/>
                <Route path="*" component={Dashboard} />
            </Switch>
        </div>
    </BrowserRouter>;

在我的测试中，我想检查“ / contact”路线，App确实将呈现ContactForm组件。我该怎么办？

如果我尝试：

const wrapper = mount(
   <MemoryRouter initialEntries={[ '/contact' ]}>
      <App/>
   </MemoryRouter>
);

但是这种包装方法也可以渲染仪表板，因此expect(wrapper.find(ContactForm)).toHaveLength(1);不会通过。

我应该如何正确检查？

更新

这是我现在如何对其进行测试：

    const wrapper = mount(
        <MemoryRouter initialEntries={[ '/' ]}>
            <App/>
        </MemoryRouter>
    );
    wrapper.find("nav").find(Link).simulate("click", { button: 0 });
    expect(wrapper.find(ContactForm)).toHaveLength(1);

因此，我必须从“ /”路由开始，然后模拟对链接的单击，然后它才能工作。

Answer 1

<MemoryRouter initialEntries={[ '/contact' ]}>

这应该可以正常工作...检查App组件内props.location的值是什么可能是BrowserRouter更改了位置

测试是否针对特定路线渲染了组件

1 个答案: