Secondo la documentazione Enzyme :
mount(<Component />)
per il rendering Full DOM è ideale per i casi d'uso in cui si hanno componenti che possono interagire con le API DOM, o possono richiedere l'intero ciclo di vita per testare completamente il componente (ad esempio, componentDidMount ecc.)
vs.
shallow(<Component />)
for Shallow rendering è utile per limitarti a testare un componente come un'unità e per assicurarti che i tuoi test non affermino indirettamente il comportamento dei componenti figli.
vs.
render
che viene utilizzato per rendere i componenti di reazione all'HTML statico e analizzare la struttura HTML risultante.
Puoi ancora vedere i "nodi" sottostanti in un rendering superficiale, quindi, ad esempio, puoi fare qualcosa di simile (leggermente artificioso) usando AVA come spec runner:
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));
});
Si noti che il rendering , l' impostazione di oggetti di scena e la ricerca di selettori e persino eventi sintetici sono tutti supportati dal rendering superficiale, quindi la maggior parte delle volte puoi semplicemente usarlo.
Tuttavia, non sarai in grado di ottenere l'intero ciclo di vita del componente, quindi se ti aspetti che le cose accadano in componentDidMount, dovresti usare mount(<Component />)
;
Questo test utilizza Sinon per spiare i componenticomponentDidMount
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();
});
Quanto sopra non passerà con il rendering superficiale o di rendering
render
ti fornirà solo l'html, quindi puoi ancora fare cose come questa:
test.only('render works', t => {
// insert Test component here...
const rendered = render(<Test />);
const len = rendered.find('div').length;
t.is(len, 1);
});
spero che questo ti aiuti!