Тестирование навигации в реагировании с MemoryRouter после нажатия кнопки (шутка, энзим)

Question

Итак, я пытаюсь проверить с помощью MemoryRouter , что если я нажму кнопку, которая должна привести меня к новому маршруту , он действительно откроет этот маршрут.

Таким образом, ConversationView - это компонент реакции внутри Conversations. Я хочу иметь возможность проверить, что, когда я нажму на кнопку, расположенную внутри «Беседы», я смогу добраться до нового маршрута «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 магазин к разговорам. но я издевался над магазином, поэтому никакой дополнительной асинхронной работы не было.

Answer 1

Попробуйте изменить результат expact ():

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

Или вы можете попытаться установить Props для обёртки следующим образом:

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);