Відповідно до документів Enzyme :
mount(<Component />) для повного візуалізації DOM ідеально підходить для випадків, коли у вас є компоненти, які можуть взаємодіяти з DOM apis, або може знадобитися повний життєвий цикл, щоб повністю протестувати компонент (тобто компонентDidMount тощо)
vs.
shallow(<Component />) для Рідкого відображення корисно обмежитися тестуванням компонента як одиниці та гарантувати, що ваші тести не опосередковано стверджують про поведінку дочірніх компонентів.
vs.
renderякий використовується для візуалізації компонентів реагування на статичний HTML та аналізу отриманої HTML структури.
Ви все ще можете бачити основні "вузли" в неглибокому візуалізації, тому, наприклад, ви можете зробити щось на зразок цього (злегка надуманого) прикладу, використовуючи AVA в якості бігуна spec:
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));
});
Зауважте, що візуалізація , налаштування реквізиту та пошук селекторів та навіть синтетичні події підтримуються неглибоким візуалізацією, тому більшість разів ви можете просто використовувати це.
Але ви не зможете отримати повний життєвий цикл компонента, тому, якщо ви очікуєте, що щось станеться у компонентіDidMount, вам слід скористатися 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);
});
сподіваюся, що це допомагає!