使用Enzyme测试URL哈希更改后是否可以测试影响?

时间:2019-01-25 13:57:33

标签: enzyme react-transition-group

我正在用酶进行测试,以使Parent组件根据url哈希值渲染正确的Child。我正在使用WrappedComponent,因为该组件使用React Router的withRouter高阶组件来获取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();
});

0 个答案:

没有答案