Wann sollten Sie in Enzym-/React-Tests rendern und flach drucken?

Question

vor dem Posten dieser Frage, habe ich versucht, in sqa staplexchange zu suchen, aber ich habe keinen Beitrag über seicht und rendern dort, so dass ich hoffe, jemand kann mir hier helfen.

Wann sollte ich flache und im Test reagierende Bauteile verwenden? Basierend auf den airbnb docs habe ich einige Meinungen über den Unterschied der beiden gemacht:

1. Da seicht Komponenten als Einheit Prüfung, so dass es für ‚Eltern‘ Komponenten verwendet werden soll. (Beispiel: Tabellen, Wrapper usw.)

2. Render ist für untergeordnete Komponenten.

Der Grund, warum ich diese Frage gestellt, ist, dass ich eine harte Zeit, die man, um herauszufinden, habe ich verwenden soll (obwohl die docs sagen, dass sie sehr ähnlich sind)

So, wie weiß ich, welche in einem bestimmten Szenario zu verwenden?

Answer 1

Gemäß dem Enzyme docs:

mount(<Component />) für Full DOM-Rendering ist ideal für den Einsatz Fälle, in denen Sie die Komponenten, die mit DOM apis in Wechselwirkung treten können, oder sie können den gesamten Lebenszyklus benötigen, um vollständig die Komponente zu testen (dh , componentDidMount etc.)

gegen

shallow(<Component />) für Shallow Rendering nützlich ist, um sich als eine Einheit testen einer Komponente zu beschränken, und um sicherzustellen, dass Ihre Tests indirekt nicht auf das Verhalten der untergeordneten Komponenten geltend zu machen.

vs.

render die Komponenten statischen HTML reagieren zu machen, verwendet wird, und Analysieren der resultierenden HTML-Struktur.

Sie können immer noch die zugrunde liegenden „Knoten“ in einem flachen sehen machen, so zum Beispiel, Sie so etwas wie dieses (etwas gekünstelt) Beispiel tun können AVA als spec Läufer mit:

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

Beachten Sie, dass Rendering, Requisiten Einstellung und Selektoren und sogar synthetische Ereignisse finden alle durch seichte Rendering unterstützt werden, so dass Sie die meiste Zeit, dass nur nutzen können.

Sie können jedoch nicht den gesamten Lebenszyklus der Komponente abrufen. Wenn Sie also erwarten, dass Dinge in componentDidMount passieren, sollten Sie mount(<Component />);

Dieser Test verwendet Sinon auf die Komponente 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(); 
}); 

Die von oben mit flachen Pass nicht auszuspionieren, so dass Sie nur Rendering oder machen

render werden Sie mit der html bieten kann immer noch so etwas tun:

hoffe das hilft!