React + Jest Check Komponente enthält eine andere Komponente

Question

Ich habe DetailPanel Komponente, die Detail enthält mit title Prop.

import React from 'react'; 
import Detail from './Detail'; 
import InfoTable from './InfoTable'; 
import EdgeIcon from './EdgeIcon'; 
import styles from './DetailsPanel.css'; 

export default class DetailsPanel extends React.PureComponent { 

    renderTitle() { 
    const { selectedEdge } = this.props; 

    if (selectedEdge) { 
     const sourceNode = 'sourceNode' 
     const targetNode = 'targetNode' 

     return (
     <span> 
      {sourceNode} 
      <EdgeIcon className={styles.arrowIcon} /> 
      {targetNode} 
     </span> 
    ); 
    } 

    return 'default title'; 
    } 

    render() { 
    return (
     <Detail title={this.renderTitle()} /> 
    ); 
    } 
} 

ich binden, das überprüfen, ob selectedEdge ist true Details Titel EdgeIcon Komponente

test('Detail should contain EdgeIcon if there is selected edge',() => { 
    const selectedEdge = { source: 1, target: 2 }; 
    const detailsPanel = shallow(
    <DetailsPanel 
     {...props} 
     selectedEdge={selectedEdge} 
    />); 
    expect(detailsPanel.contains('EdgeIcon')).toBeTruthy(); 
}); 

Aber Test nicht enthält, weil detailsPanel false

Answer 1

kehrt können Sie versuchen, mount zu verwenden, anstatt shallow wenn Sie möchten tiefe Kinder überprüfen. Zum Beispiel:

test('Detail should contain EdgeIcon if there is selected edge',() => { 
    const selectedEdge = { source: 1, target: 2 }; 
    const detailsPanel = mount(
    <DetailsPanel 
     {...props} 
     selectedEdge={selectedEdge} 
    />); 
    expect(detailsPanel.contains('EdgeIcon')).toBeTruthy(); 
}); 

Answer 2

Erstens, wenn Sie eine Komponente testen, sollten Sie ihre Kinder nicht testen. Jedes Kind sollte seinen eigenen Test haben.

Aber wenn Sie wirklich in die Kinder Ihrer Komponente schauen müssen, verwenden Sie mount anstelle von shallow.

Referenz: http://airbnb.io/enzyme/docs/api/ReactWrapper/mount.html