Shallow test Reagieren Zweig Jest und Enzym

Question

Es gibt drei Dinge, die ich herausfinden möchte. Fürs Erste verwende ich flachen Render. Ich benutze Enzyme und Scherzartikel.

1. Ich frage mich, wie ich die Zweige in meiner React-Komponente testen kann. I möchte beide Seiten der If-else-Anweisung (? :) testen. Und ich möchte nicht in einer eigenen Funktion herausziehen.
2. Wie kann ich überprüfen, ob this.props.myFuncFromProps (Wert) aufgerufen wurde, wenn sich die Eingabe ändert?
3. Was ist die beste Vorgehensweise zum Testen von mapStateToProps und mapDispatchToProps? Hier

ist ein Beispiel dafür, wie meine Komponente aussehen würde:

import React from 'react'; 
 
import MyChildComponent from 'wherever'; // This component is an input field in this example 
 

 
export class MyComponent extends React.Component { 
 
    render() { 
 
    const myFunc(value) { 
 
     this.props.myFuncFromProps(value); 
 
    } 
 
    
 
    return (
 
     <div> 
 
     { this.props.isTrue ? 
 
      <MyChildComponent 
 
      value={this.props.value} 
 
      onChange={(value) => myFunc(value)} 
 
      /> 
 
      : null 
 
     } 
 
     </div> 
 
    ); 
 
    } 
 
}

Answer 1

Um zu testen, die verschiedenen Zustände nur Ihre Komponente mit den verschiedenen Attributen machen und einen Schnappschuss machen (Anmerkung , dass Sie überprüfen müssen, wann der Snapshot zum ersten Mal erstellt wurde). Um den Ereignis-Callback zu testen, müssen Sie eine Spion-Funktion() an die Komponente übergeben und simulate verwenden, um das Ereignis aufzurufen. Testen Sie dann, dass der Spion aufgerufen wurde.

describe('MyComponent',() => { 
    describe('with isTrue is true',() => { 
     let myComponent 
     let myFuncFromProps 
     beforeEach(() => { 
      myFuncFromProps = jest.fn() 
      myComponent = shallow(
       <MyComponent isTrue myFuncFromProps={myFuncFromProps} /> 
      ) 
     }) 
     it('renders correct',() => { 
      expect(myComponent).matchSnapshot() 
     }) 

     it('onchange will call myFuncFromProps',() => { 
      myComponent 
       .find('MyChildComponent') 
       .simulate('onChange', 'someValue') 
      expect(myFuncFromProps).toHaveBeenCalledWith('someValue') 
     }) 
    }) 

    it('with isTrue is false it renders correct',() => { 
     const myComponent = shallow(<MyComponent />) 
     expect(myComponent).matchSnapshot() 
    }) 
})