De acordo com os documentos Enzyme :
mount(<Component />)
para Full DOM render é ideal para casos de uso onde você tem componentes que podem interagir com DOM apis, ou pode exigir o ciclo de vida completo para testar totalmente o componente (ou seja, componentDidMount etc.)
vs.
shallow(<Component />)
para a renderização superficial é útil para restringir-se a testar um componente como uma unidade e para garantir que seus testes não estejam afirmando indiretamente sobre o comportamento de componentes filhos.
vs.
render
que é usado para renderizar componentes de reação ao HTML estático e analisar a estrutura HTML resultante.
Você ainda pode ver os "nós" subjacentes em uma renderização rasa, então, por exemplo, você pode fazer algo como este exemplo (ligeiramente artificial) usando AVA como o executor de especificação:
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));
});
Observe que a renderização , configuração de adereços e localização de seletores e até eventos sintéticos são suportados pela renderização superficial, então na maioria das vezes você pode apenas usar isso.
Mas, você não será capaz de obter o ciclo de vida completo do componente, então se você espera que algo aconteça no componentDidMount, você deve usar mount(<Component />)
;
Este teste usa o Sinon para espionar o componentecomponentDidMount
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();
});
O texto acima não passará com renderização superficial ou renderização
render
fornecerá apenas o html, então você ainda pode fazer coisas como esta:
test.only('render works', t => {
// insert Test component here...
const rendered = render(<Test />);
const len = rendered.find('div').length;
t.is(len, 1);
});
espero que isto ajude!