Kiedy należy stosować render i shallow w testach enzymatycznych / reakcyjnych?

Zgodnie z enzym docs :

mount(<Component />) pełne renderowanie DOM jest idealne dla przypadków użycia, w których masz komponenty, które mogą wchodzić w interakcje z API DOM lub mogą wymagać pełnego cyklu życia, aby w pełni przetestować komponent (np. componentDidMount itp.)

Vs.

shallow(<Component />) ponieważ płytkie renderowanie jest przydatne, aby ograniczyć się do testowania komponentu jako jednostki i upewnić się, że testy nie są pośrednio potwierdzające zachowanie dziecka komponenty.

Vs.

render który jest używany do renderowania komponentów reactowych do statycznego HTML i analizy wynikowej struktury HTML.

Nadal możesz zobaczyć podstawowe "węzły" w płytkim renderowaniu, więc na przykład możesz zrobić coś takiego (nieco wymyślonego) przykład używając AVA jako 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));
});

Zauważ, że renderowanie, ustawianie rekwizytów i znajdowanie selektorów a nawet syntetycznych zdarzenia są obsługiwane przez płytkie renderowanie, więc większość razy można po prostu z niego korzystać.

Ale nie będziesz w stanie uzyskać pełnego cyklu życia komponentu, więc jeśli spodziewasz się, że coś się wydarzy w componentDidMount, powinieneś użyć mount(<Component />);

Ten test wykorzystuje Sinon do szpiegowania komponentów 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();
});

Powyższe nie przejdzie z shallow rendering lub render

render dostarczy Ci tylko html, więc nadal możesz to zrobić takie rzeczy:

test.only('render works', t => {

    // insert Test component here...

    const rendered = render(<Test />);
    const len = rendered.find('div').length;
    t.is(len, 1);
});