let wrapper = shallow(<TagBox />);
const props = {
toggleValue: sinon.spy()
};
test('it should render two top level nodes', t => {
t.is(wrapper.children().length, 2);
});
test('it should safely set all props and still render two nodes', t => {
wrapper.setProps({...props});
t.is(wrapper.children().length, 2);
});
test('it should call toggleValue when an x class is clicked', t => {
wrapper.setProps({...props});
wrapper.find('.x').last().simulate('click');
t.true(props.toggleValue.calledWith(3));
});
2 回答
按照酶docs:
mount(<Component />)
for Full DOM渲染非常适用于您拥有可能与DOM apis交互的组件的情况,或者可能需要整个生命周期才能完全测试组件(即componentDidMount等)与
shallow(<Component />)
for Shallow渲染对于约束自己将组件作为一个单元进行测试很有用,并确保您的测试不会间接断言子组件的行为 .与
render
用于将响应组件呈现给 static HTML 并分析生成的HTML结构 .您仍然可以在浅层渲染中看到基础"nodes",例如,您可以使用AVA作为规范运行器来执行此类(稍加设计)的示例:
请注意,浅渲染支持渲染,设置道具和查找选择器甚至合成事件,因此大多数情况下您可以使用它 .
但是,您将无法获得组件的整个生命周期,因此如果您希望在componentDidMount中发生事情,则应使用
mount(<Component />)
;此测试使用Sinon监视组件的
componentDidMount
以上不会通过浅渲染或渲染
render
将仅为您提供html,因此您仍然可以执行以下操作:希望这可以帮助!
shallow()和mount()之间的区别在于shallow()测试组件与它们呈现的子组件隔离,而mount()更深入并测试组件的子组件 . 对于shallow(),这意味着如果父组件渲染另一个无法渲染的组件,那么父级上的浅()渲染仍将传递 .