Testen der Tülle Layer-Komponente

Question

Ich verwende Tülle mit reagieren, um die Benutzeroberfläche meiner Anwendung zu rendern. Ich habe eine Layer-Komponente angezeigt, wenn der Benutzer auf eine Schaltfläche klickt. Alles funktioniert gut, aber ich kann Layers Kinder nicht testen. Ich verwende Enzym, Mokka und Chai als Testsuite. Dies ist Code der Code meiner Komponente:

<Layer align="right" closer> 
    <Header size="large" justify="between" align="center"> 
     <Button icon={<CloseIcon />} plain={true} onClick={ props.hide }/> 
    </Header> 
    <Section key={index} pad={{ horizontal: 'large', vertical: 'small' }}> 
     { props.list } 
    </Section> 
</Layer> 

und dies ist mein Test:

const wrapper = shallow(<MyComponent />); 
const layer = wrapper.find(Layer); 

//this works 
expect(layer).to.have.length.of(1); 

const section = layer.find(Section); 

//and this fails 
expect(section).to.have.length.of(1); 

Mit Blick auf die gerenderte Komponente in der Anwendung, fand ich, dass Tülle seine Schichtkomponente auf diese Weise machen :

<Layer><span style={{ display: 'none'}}></span></Layer> 

Jeder kann mir helfen? Danke

Answer 1

Wenn Sie sich die source code for the layer component ansehen, werden Sie sehen, dass es die Spanne zurückgibt, die Sie in der Rendermethode veröffentlicht haben. Erst wenn die Komponente montiert ist, wird die layer's contents will be rendered durch Aufruf der addLayer Methode in der Layer Klasse aufgerufen.

Ich glaube, dass Sie Enzym mount Funktion verwenden sollten, um zu testen, dass der Layer seinen Inhalt richtig darstellt, da Sie möchten, dass die -Methode aufgerufen wird.