Проверить влияние после изменения URL-хеша с помощью Enzyme? - PullRequest
Новая
       12

Проверить влияние после изменения URL-хеша с помощью Enzyme?

0 голосов
/ 25 января 2019

Я тестирую с помощью Enzyme, если родительский компонент отображает правильный Child на основе хеша URL.Я использую WrappedComponent, так как компонент использует компонент высшего порядка withRouter React Router для получения хэша URL.

Этот тест работает нормально: 

test(`<Parent /> renders correct child`, () => {
  const wrapper = mount(
    <Parent.WrappedComponent
      location={{
        hash: "#one"
      }}
    >
      <ChildOne hash="#one" />
      <ChildTwo hash="#two" />
    </Parent.WrappedComponent>
  );
  expect(wrapper.contains(ChildOneText)).to.equal(true);
});

Когда хэш изменяется с #one на #two, тогда ChildTwo анимируется с помощью модуля React Transition Group.

https://github.com/reactjs/react-transition-group

Как проверить, что визуализируется другой дочерний элемент и что была вызвана анимация?Я экспериментировал со сменой реквизита с setTimeout, но второй console.log() никогда не срабатывает.

test(`<Parent /> renders correct child`, () => {
  let location={
    hash: "#one"
  };

  setTimeout(() => {
    location.hash = "#two";
  }, 1000);

  const wrapper = mount(
    <Parent.WrappedComponent location={location}>
      <ChildOne hash="#one" />
      <ChildTwo hash="#two" />
    </Parent.WrappedComponent>
  );

  setTimeout(() => {
    wrapper.debug();
  }, 1100);

  wrapper.debug();
});

Я также пытался использовать wrapper.setProps, но ChildOne отображается оба раза.

test(`<Parent /> renders correct child`, () => {
  const wrapper = mount(
    <Parent.WrappedComponent
      location={{
        hash: "#one"
      }}
    >
      <ChildOne hash="#one" />
      <ChildTwo hash="#two" />
    </Parent.WrappedComponent>
  );
  wrapper.debug();

  wrapper.setProps({
    location: {
      hash: "#two"
    }
  });
  wrapper.debug();
});
...