我正在用酶进行测试,以使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();
});