酵素のドキュメントによると：
mount(<Component />) 完全なDOMのレンダリングは、DOM APIと相互作用するコンポーネントがある場合、またはコンポーネントを完全にテストするために完全なライフサイクルが必要な場合（つまり、componentDidMountなど）のユースケースに最適です。
対
shallow(<Component />) 浅いレンダリングは、コンポーネントを1つのユニットとしてテストするように制限し、テストが子コンポーネントの動作を間接的にアサートしないようにするのに役立ちます。
対
renderこれは、コンポーネントを静的HTMLにレンダリングし、結果のHTML構造を分析するために使用されます。
それでも、浅いレンダーで基礎となる「ノード」を表示できるため、たとえば、スペックランナーとしてAVAを使用して、次のような（少し工夫された）例を実行できます。
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));
});
お知らせそのレンダリング、小道具を設定し、セレクタを発見しても、合成のイベントはすべて、浅いレンダリングによってあなたはちょうどそれを使用することができますので、ほとんどの時間をサポートしています。
ただし、コンポーネントのライフサイクル全体を取得することはできないため、componentDidMountで発生することが予想される場合は、を使用する必要がありますmount(<Component />)。
このテストでは、Sinonを使用してコンポーネントのスパイを行いますcomponentDidMount
test.only('mount calls componentDidMount', t => {
class Test extends Component {
constructor (props) {
super(props);
}
componentDidMount() {
console.log('componentDidMount!');
}
render () {
return (
<div />
);
}
};
const componentDidMount = sinon.spy(Test.prototype, 'componentDidMount');
const wrapper = mount(<Test />);
t.true(componentDidMount.calledOnce);
componentDidMount.restore();
});
上記は、浅いレンダリングまたはレンダリングでは通過しません
render はHTMLのみを提供するので、次のようなことができます。
test.only('render works', t => {
// insert Test component here...
const rendered = render(<Test />);
const len = rendered.find('div').length;
t.is(len, 1);
});
お役に立てれば！