Testen eine komponierten Reactjs Komponente mit Enzyme

Question

ich die Rat der React Dokumentation folgte eine spezielle Komponente, die durch Komposition zu erstellen:

export default class AlertPanel extends React.Component { 

    constructor(props) { 
     super(props); 
    } 

    render() { 
       textRows = <div>{this.props.text}</div>; 
      } 

      return (
       <Alert bsStyle={this.props.style} onDismiss={this.props.onDismiss}> 
        {textRows} 
       </Alert> 
      ); 
    } 

... und ...

import React from 'react'; 
import AlertPanel from './AlertPanel'; 

export default class SpecialAlertPanel extends React.Component { 

    constructor(props) { 
     super(props); 
    } 

    render() { 
     return (
      <AlertPanel text="special" /> 
     ) ; 
    } 
} 

AlertPanel haben einen vorübergehenden Test :

it('should render AlertPanel to a div', function() { 
    const wrapper = shallow(<AlertPanel />); 
    expect(wrapper.type()).to.eql('div'); 
}); 

Ich dachte, ein äquivalenter Test würde fürfunktionieren 10:

it('should render SpecialAlertPanel to a div', function() { 
    const wrapper = shallow(<SpecialAlertPanel />); 
    expect(wrapper.type()).to.eql('div'); 
}); 

Aber dieser Test fehlschlägt:

expected [Function: AlertPanel] to deeply equal 'div' 

Ist mein Test oder bei Störung meinen Code?

Answer 1

Da Sie flache Rendering SpecialAlertPanel tun wird AlertPanel gemacht nach unten, aber nicht „tiefer“ (http://airbnb.io/enzyme/docs/api/ShallowWrapper/shallow.html)

Wahrscheinlich brauchen Sie so etwas wie

it('should render SpecialAlertPanel to a div', function() { 
    const wrapper = shallow(<SpecialAlertPanel />); 
    expect(wrapper.find(AlertPanel).shallow().type()).to.eql('div'); 
}); 

Answer 2

Von https://github.com/airbnb/enzyme/blob/master/docs/api/ShallowWrapper/type.md:

Wenn es ein Verbundbauteil ist, wird dies die Komponente Konstruktor sein.

So SpecialAlertPanel ist Wrapper Typ AlertPanel.

Wenn der Test bestanden werden soll, wrap AlertPanel in eine div.

Answer 3

etwas anders @Igor und @ RemLampa die richtigen Antworten . Eine andere Sicht darauf ist - Was sollten Sie testen SpecialAlertPanel für?

Mit den Beispielen, die Sie gezeigt haben, haben Sie eine AlertPanel Komponente und es ist getestet.

SpecialAlertPanel 's einzige Funktion ist AlertPanel zu rendern.

Testen SpecialAlertPanel für eine <div> ist Duplizieren AlertPanel Test.

Wirklich alles, was Sie testen müssen, ist, wenn SpecialAlertPanel ein AlertPanel Rendern ist. Wenn AlertPanel die Tests bestanden hat und SpecialAlertPanel den Test bestanden hat, um nach einem AlertPanel zu suchen, dann wissen Sie bereits, dass es ein <div> rendert, ohne explizit dafür zu testen.

(Natürlich müssen Sie Tests SpecialAlertPanel hinzufügen, wenn Sie in Zukunft zusätzliche Funktionen hinzufügen)