Sind Enzyme/Reacts seicht teuer?

Question

Wir haben eine Diskussion bei der Arbeit über Enzym shallow renders und die Zeit pro Test, um flach bei jedem Test zu laufen. Sei es Methoden, Klicks, Selektorlängen, etc., ich schlage vor, dass unsere Tests schneller ausgeführt werden könnten, wenn wir die Komponente einmalig vor die Tests im Vergleich jeweils Zeit ausführen.

Gibt es Experten, die aufzeigen können, welcher Weg schneller wäre und ob es irgendwelche Fallstricke gäbe? Diese Beispiele verwenden die AVA Runner (und leicht zur Erörterung gedacht).

Zum Beispiel, hier ist ein Weg (A) ...

import TagBox from '../TagBox'; 
const props = { toggleValue: sinon.spy() }; 
let wrapper = {}; 

test.before(t => { 
    wrapper = shallow(<TagBox />); 
}); 

test('it should have two children', t => { 
    t.is(wrapper.children().length, 2); 
}); 

test('it should safely set props', t => { 
    wrapper.setProps({...props}); 
    t.is(wrapper.children().length, 2); 
}); 

test('it should call when clicked', t => { 
    wrapper.setProps({...props}); 
    wrapper.find({tagX : true}).last().simulate('click'); 
    t.true(props.toggleValue.calledOnce); 
}); 

Und hier ist der andere (B) ...

import TagBox from '../TagBox'; 

test('it sets value to null ...', t => { 
    const props = {multiple: false}; 
    const wrapper = shallow(<TagBox {...props} />); 
    t.is(wrapper.state('currentValue'), null); 
}); 

test('it sets value to [] if multiple', t => { 
    const props = {multiple: true}; 
    const wrapper = shallow(<TagBox {...props} />); 
    t.deepEqual(wrapper.state('currentValue'), []); 
}); 

test('it does not use value if ...', t => { 
    const props = = {value: 3}; 
    const wrapper = shallow(<TagBox {...props} />); 
    t.is(wrapper.state('currentValue'), null); 
}); 

// etc. etc. 

Beachten Sie, dass in Test B, Es gibt einen neuen flachen Wrapper für jeden Test, wenn sich im Wesentlichen nichts geändert hat, aber Requisiten.

Im Laufe von 100 Tests, was erwarten Sie von der Zeit bis zur Fertigstellung?

Gibt es auch eine Chance flaches Rendering einmal (Test A) im höheren Bereich würde den Teststatus verschmutzen?

Answer 1

Shallow Renderer ist entworfen, um schnell zu sein, weil es nur einzelne Komponente darstellt. Normalerweise erhalten Sie keine Leistungsprobleme, wenn Sie für jeden Test eine neue Komponente erstellen.

Auch Ihr Beispiel A kann falsch funktionieren, wenn TagBox Komponente inneren Zustand hat. Deshalb ist Beispiel B eine bessere Möglichkeit, Tests zu schreiben.

Answer 2

Die shallow ist wahrscheinlich nicht Ihr Problem hier, da es entworfen wurde, um die schnellste Möglichkeit zu sein, eine Komponente zu rendern, ohne alle ihre Kinder-Renderings zu kaskadieren.

Sie können in Betracht ziehen, Ihre Testlaufmaschine zu ändern, dann ist AVA im Vergleich zu Jest zum Beispiel etwas langsam. Ich habe diese Änderung vor einem Jahr gemacht und es ist viel schneller. Jest bietet auch in seinem Basis-Kit nützlichere Sachen wie Mocking-Funktionen des Beispiels.

Mehr hier: https://facebook.github.io/jest/