单击按钮(笑话,酵素)后,测试与MemoryRouter反应的导航

时间:2019-03-17 16:06:40

标签: reactjs testing jestjs router enzyme

因此,我正在尝试使用 MemoryRouter 进行测试,如果我单击应该带我到新的 Route 的按钮,则实际上会打开该路由

因此,“ ConversationView”是“对话”中的react组件。我希望能够测试一下,当我单击“对话”中的按钮时,我是否能够到达新路由“ ConversationsView”并在其中找到“ h2”标签。

这是我的代码:

const wrapper = mount(
   <MemoryRouter initialEntries={[ "/" ]}>
     <Conversations.wrappedComponent store={store}>
       <ConversationView>
       </ConversationView>
     </Conversations.wrappedComponent>
   </MemoryRouter>);

   const button = wrapper.find("button").first();
   button.simulate("click");
   expect(wrapper.find("h2")).toHaveLength(1);

我在做什么错?我应该如何测试这种情况?

P.S。我正在为对话注入MobX商店。但是我确实模拟了商店,因此没有额外的异步工作。

1 个答案:

答案 0 :(得分:0)

尝试更改expact()结果:

 expect(wrapper.find("h2")).toEqual(1);

或者您可以尝试将setProps像这样包装:

const wrapper = mount(
            // remove initialEntrie from here
            <MemoryRouter>
                <Conversations >
                    <ConversationView>
                    </ConversationView>
                </Conversations>
            </MemoryRouter>);

        // set props (initialEntries) to the component 
        wrapper.setProps({ initialEntries: '/' })

        const button = wrapper.find("button").first();
        button.simulate("click");
        expect(wrapper.find("h2")).toHaveLength(1);