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

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

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

Ваш обработчик click выполняет асинхронную работу?

— 17.03.2019 21:22

Нет, он просто должен отображать другую страницу.

— 18.03.2019 08:16

reactjs testing jestjs router enzyme

17.03.2019 17:06

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

1 086

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

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

Нет, это особо ничего не изменило.

— 18.03.2019 08:12

17.03.2019 17:20