enzym test mehrere render-methoden innerhalb der gleichen komponente

Question

Ich habe eine Komponente mit mehreren Render-Methoden. Wie kann ich sie alle testen? Mit Enzym und Scherz mit reagieren.

Einige Pseudocode als ein Beispiel für meine Komponentenstruktur als Komponente ist ruhig groß.

class MyComponent extends Component{ 
 

 
    render1(){ 
 
    return(
 
     <div>render1</div> 
 
    ) 
 
    } 
 
    
 
    render2(){ 
 
    return(
 
     <div>render2</div> 
 
    ) 
 
    } 
 
    
 
    render(){ 
 
    return(
 
     <div>default</div> 
 
    ) 
 
    } 
 
} 
 

 
export default MyComponent;

Mein Test deckt nur render() es nicht render1() oder render2() abdeckt. Es scheint, Enzym sieht die Standard render() Methode?

describe('MyComponent',() => { 
 
    beforeEach(() => { 
 
     wrapper = shallow(<MyComponent />); 
 
    }); 
 
    
 
    it('MyComponent renders without crashing',() => { 
 
     expect(wrapper.length).toBeTruthy(); 
 
    }); 
 
};

Wie kann ich schließen render1() und render2() in meiner Berichterstattung?

Answer 1

Sie sollten nur eine render()-Methode verwenden, das ist die Methode, die beim Montieren von Komponenten mit ReactDOM.render oder enzyme.shallow aufgerufen wird. Wie funktionieren die anderen Rendering-Methoden für Sie?

Vielleicht könnten Sie etwas tun, zu entscheiden, welche Methode aus der render() Methode aufzurufen basierend auf einigen prop oder Zustand:

class MyComponent extends Component{ 

    render1(){ 
    return(
     <div>render1</div> 
    ) 
    } 

    render2(){ 
    return(
     <div>render2</div> 
    ) 
    } 

    render(){ 
    const {shouldRender1, shouldRender2} = this.props; 

    if (shouldRender1) { 
     return this.render1(); 
    } 

    if (shouldRender2) { 
     return this.render2(); 
    }  

    return(
     <div>default</div> 
    ) 
    } 
} 

export default MyComponent; 

Dann die Tests wie folgt aussehen:

describe('MyComponent',() => { 
    it('MyComponent should render with render1 method',() => { 
     wrapper = shallow(<MyComponent shouldRender1={true} />); 
     expect(wrapper.length).toBeTruthy(); 
    }); 

    it('MyComponent should render with render2 method',() => { 
     wrapper = shallow(<MyComponent shouldRender2={true} />); 
     expect(wrapper.length).toBeTruthy(); 
    }); 

    it('MyComponent should render with default render method',() => { 
     wrapper = shallow(<MyComponent />); 
     expect(wrapper.length).toBeTruthy(); 
    });  
};