Gemäß den Enzymdokumenten :
mount(<Component />) Das vollständige DOM-Rendering ist ideal für Anwendungsfälle, in denen Komponenten vorhanden sind, die möglicherweise mit DOM-APIs interagieren oder den vollständigen Lebenszyklus benötigen, um die Komponente vollständig zu testen (z. B. componentDidMount usw.).
vs.
shallow(<Component />) for Shallow Rendering ist nützlich, um sich darauf zu beschränken, eine Komponente als Einheit zu testen, und um sicherzustellen, dass Ihre Tests nicht indirekt das Verhalten untergeordneter Komponenten bestätigen.
vs.
renderHiermit werden Reaktionskomponenten in statisches HTML gerendert und die resultierende HTML-Struktur analysiert.
Sie können die zugrunde liegenden "Knoten" weiterhin in einem flachen Render sehen, sodass Sie beispielsweise mit AVA als Spezifikationsläufer so etwas wie dieses (leicht erfundene) Beispiel ausführen können:
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));
});
Beachten Sie, dass das Rendern , das Setzen von Requisiten und das Finden von Selektoren und sogar synthetische Ereignisse durch flaches Rendern unterstützt werden. In den meisten Fällen können Sie dies also einfach verwenden.
Sie können jedoch nicht den gesamten Lebenszyklus der Komponente abrufen. Wenn Sie also erwarten, dass in componentDidMount etwas passiert, sollten Sie Folgendes verwenden mount(<Component />):
Dieser Test verwendet Sinon , um die Komponenten auszuspionierencomponentDidMount
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();
});
Das Obige wird mit flachem Rendern oder Rendern nicht bestanden
render wird Ihnen nur das HTML zur Verfügung stellen, so dass Sie immer noch solche Dinge tun können:
test.only('render works', t => {
// insert Test component here...
const rendered = render(<Test />);
const len = rendered.find('div').length;
t.is(len, 1);
});
hoffe das hilft!