Как протестировать компонент, который демонтируется сразу после монтирования, с помощью библиотеки React Testing?

Я пытаюсь использовать React Testing Library, т.е. не использовать поверхностный рендеринг, но я не уверен, как (или если это возможно) сделать это для этой ситуации.

у меня есть Parent компонент с 2 детьми. initialMount поставляется Redux:

const Parent = ({ initialMount )} = () => {
    if (initialMount) {
        return <ChildOne />
    } else {
        return <ChildTwo />
    }
}

Когда приложение загружается initialMount является true так ChildOne возвращается Это читает URL и на основе значения отправляет некоторые действия Redux. Один из этих наборов действий initialMount ложно, что вызывает ChildOne демонтировать и ChildTwo возвращается Parent вместо.

Мне нужно проверить, что правильный ребенок возвращается на основе значения initialMount

Если я использую неглубокий рендер Enyzme для Parent без Redux и издеваться appInitMount значение, то это довольно легко проверить:

test("Shalow render appInitMount=true", () => {
  const wrapper = shallow(<ChooseIndex appInitMount={true} />);
  console.log(wrapper.debug());
  // Will show ChildOne is returned
});

test("Shalow render appInitMount=false", () => {
  const wrapper = shallow(<ChooseIndex appInitMount={false} />);
  console.log(wrapper.debug());
  // Will show ChildTwo is returned
}); 

Однако я использую React Testing Library, так как хочу избежать поверхностного рендеринга. Поэтому мне нужно пройти тестирование в моем магазине Redux:

test("Full render", () => {
  const wrapper = render(
    <Provider store={store}>
      <Parent />
    </Provider>
  );
  wrapper.debug();
});

Отладка показывает, что ChildTwo возвращается Я думаю, что это на самом деле правильное поведение, так как ChildOne сначала возвращается, он отправляет действия, затем отключается и ChildTwo возвращается вместо. Но как я могу это проверить?

Можете ли вы перехватить действие Redux, чтобы остановить appInitMount быть измененным?

0 ответов

Другие вопросы по тегам