Enzim / React testlerinde ne zaman render ve sığ kullanmalısınız?

Question 1

Bu soruyu göndermeden önce, sqa stackexchange'de arama yapmayı denedim, ancak sığ ve orada render ile ilgili bir gönderi bulamadım, bu yüzden umarım birileri bana burada yardımcı olabilir.

Reaksiyon bileşenlerini test ederken ne zaman sığ ve render kullanmalıyım? Airbnb belgelerine dayanarak, ikisinin farkı hakkında bazı fikirler edindim:

Sığ, bileşenleri bir birim olarak test ettiğinden, "ana" bileşenler için kullanılmalıdır. (ör. Tablolar, Sarmalayıcılar vb.)
Oluşturma, alt bileşenler içindir.

Bu soruyu sormamın nedeni, hangisini kullanmam gerektiğini bulmakta zorlanmam (yine de dokümanlar çok benzer olduklarını söylüyor)

Peki, belirli bir senaryoda hangisini kullanacağımı nasıl bilebilirim?

Question 2

Enzim belgelerine göre :

mount(<Component />) Tam DOM oluşturma için, DOM apis ile etkileşime girebilecek bileşenlere sahip olduğunuz veya bileşeni tam olarak test etmek için tam yaşam döngüsü gerektirebilecek (yani, componentDidMount vb.)

vs.

shallow(<Component />) Sığ oluşturma için, kendinizi bir bileşeni bir birim olarak test etmekle sınırlandırmak ve testlerinizin dolaylı olarak alt bileşenlerin davranışını iddia etmediğinden emin olmak için kullanışlıdır.

vs.

renderreact bileşenlerini statik HTML'ye dönüştürmek ve ortaya çıkan HTML yapısını analiz etmek için kullanılır.

Altta yatan "düğümleri" sığ bir işlemede hala görebilirsiniz, bu nedenle, örneğin, özellik çalıştırıcısı olarak AVA'yı kullanarak bunun gibi (biraz yapmacık) bir örnek yapabilirsiniz :

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));
});

Bildirim o render , sahne ayarlayarak ve seçicileri bulma ve hatta sentetik olaylar tüm sığ render tarafından sadece o kullanabilmesi çoğu kez desteklenmektedir.

Ancak, bileşenin tam yaşam döngüsünü elde edemezsiniz, bu nedenle, componentDidMount'ta bir şeylerin olmasını bekliyorsanız, şunu kullanmalısınız mount(<Component />);

Bu test, Sinon'u bileşenlerincomponentDidMount

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();
});

Yukarıdaki ile geçemeyecek sığ render veya işlemek

render size yalnızca html'yi sağlayacaktır, böylece yine de aşağıdaki gibi şeyler yapabilirsiniz:

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

    // insert Test component here...

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

Bu yardımcı olur umarım!

Question 3

Sığ () ve mount () arasındaki fark, sığ (), bileşenleri oluşturdukları alt bileşenlerden ayrı olarak test ederken, mount () daha derine iner ve bir bileşenin alt bileşenlerini test eder.

Sığ () için bu, üst bileşen, render edemeyen başka bir bileşeni işlerse, üstteki yüzeysel () görselleştirmenin yine de geçeceği anlamına gelir.