Einheit Test A Komponente- Scherz reagieren, Enzym

Question

I am Testgerät-Komponente reagieren. Eine Komponente importiert andere Komponente und verwendet ihre Requisiten. Hier sind jsx Dateien:

class First extends React.PureComponent { 
    render() { 
     const { name, isSelected, onClick } = this.props; 
     const activeClass = isSelected ? styles.active : ''; 
     return (
      <div 
       className={`${styles.first} ${activeClass}`} 
       role="button" 
       tabIndex={0} 
       onClick={() => onClick(name)} 
      > 
       {name} 
      </div> 
     ); 
    } 
} 

First.propTypes = { 
    name: PropTypes.string.isRequired, 
    isSelected: PropTypes.bool, 
    onClick: PropTypes.func, 
}; 

export default First; 

Hier ist meine zweite Klasse, die diese Klasse importiert: i

mport First from '../First/First'; 

const Second = ({ values, passedVal, onClick }) => { 
    const second = values.map(vlaue => 
     <First 
      key={value} 
      name={value} 
      isSelected={value === passedVal} 
      onClick={onClick} 
     />, 
    ); 

    return (
     <div > 
      {Second} 
     </div> 
    ); 
}; 

Second.propTypes = { 
    values: PropTypes.arrayOf(PropTypes.string), 
    passedVal: PropTypes.string, 
    onClick: PropTypes.func, 
}; 

export default FilterList; 

Hier ist mein Test. Ich möchte isselected Zustand in meinem Test zu testen:

Es gibt mir undefined, da dies Prop First Class ist. Wie kann ich diese Logik hier überprüfen? Müssen Sie zuerst eine Instanz erstellen und dann prüfen?

Answer 1

props.isSelected wird nicht definiert, wie Sie, keinen Wert zu übergeben und es keinen Standard prop haben.

Ich denke, dass statt:

props.passedVal='value01'; 
props.value=['value01']; 

Sie werden verwenden möchten:

secondComponent.setProps({ 
    passedVal: 'value01', 
    values: ['value01'] 
}); 

Beachten Sie, dass die Komponente in Ihrem Test, bereits montiert ist, und damit neue Werte die Zuordnung Props-Objekt beeinflusst die Komponente nicht wirklich. Die Verwendung von Enzym setProps wird jedoch. Sie können ein wenig mehr darüber lesen: https://github.com/airbnb/enzyme/blob/master/docs/api/ShallowWrapper/setProps.md

Darüber hinaus ist isSelected eine Stütze der First Komponente, also bitte beachten Sie, dass, wenn Sie versuchen, seinen Wert im Test zu überprüfen.

Answer 2

Wen mit shallow der Test auf die Komponente als Einheit ausgeführt wird, und indirekt nicht auf das Verhalten der untergeordneten Komponenten geltend zu machen. Jedoch Sie für eine Eigenschaft einer untergeordneten Komponente überprüfen könnten find verwenden, beispielsweise (nicht getestet):

const wrapper = shallow(<First/>); 
expect(wrapper.find(Second).first().prop('isSelected')).to.equal('yourValue');