TDD mit Enzym flach und montieren?

Question

Wenn ich eine Komponente mit shallow oder mount rendere, wird die Komponente im Speicher gerendert und ist nicht an DOM angeschlossen.

Das bedeutet, dass während ich meine Tests ausführe, ich tatsächlich keine Ausgabe im Browser sehe.

Wie soll ich Test Driven Development durchführen, wenn ich nicht sehen kann, ob die Komponente, die ich entwickle, so aussieht wie sie sollte? (css style, sizes etc)

Answer 1

Wenn Sie möchten, dass Ihre Komponente gerendert wird, verwenden Sie die render() - Methode von Enzyme. Stellen Sie sicher, dass ein Fenster verfügbar ist (siehe jsdom, um ein Fenster zu fälschen). Aber IMO, sollten Sie in der Lage sein, alle Ihre Prüfung mit flacher oder Halterung zu tun, die API ist schön

Answer 2

Wie soll ich Test Driven Development tun, wenn ich kann nicht sehen, ob die Komponente Ich bin Entwicklung sieht so aus, wie es sein sollte? (CSS Stil, Größe usw.)

Der Zweck des Enzyms ist nicht visueller Regressionstest, für die Sie Werkzeuge verwenden müssen wie PhantomJS, in Verbindung stehende Artikel https://css-tricks.com/visual-regression-testing-with-phantomcss/

Sie irgendeine Art von Styling-Tests erreichen können Prüfen, ob Ihre Komponente beim Rendern die richtigen Selektoren hat. z.B.

it('should add the "selected" class when a click happend to one of the Elements',() => { 
    const wrapper = mount(<Elements />); 

    const option = wrapper.find('h5'); 
    expect(option.hasClass('selected')).to.equal(false); 
    option.simulate('click'); 
    expect(option.hasClass('selected')).to.equal(true); 
});