Comment tester un composant React qui appelle une fonction sur son parent, qui modifie les accessoires sur le composant?

Question

Le problème:

• accessoires d'enfant composant sont transmis les valeurs de l'état des parents.
• Child a une méthode qui appelle une méthode sur Parent, qui met à jour l'état de Parent.
• Lorsque l'état du parent est mis à jour, l'une des valeurs prop de Child change. comme dans: <Child prop1={this.state.prop1}>

Quelle est la bonne façon de tester que ce processus se déroule comme prévu?

Voici quelques exemples de code pour rendre le problème plus clairement:

//App.js 
 

 
import React, { Component } from 'react'; 
 
import Content from './Content'; 
 

 
class App extends Component { 
 
    constructor(props){ 
 
    super(props) 
 
    this.state = { 
 
     page: 'home', 
 
    } 
 
    } 
 
    
 
    gotoAbout(){ 
 
    this.setState({ 
 
     page: 'about', 
 
    }) 
 
    } 
 
    
 
    render() { 
 
    return(
 
     <Content page={this.state.page} gotoAbout={this.gotoAbout.bind(this)} /> 
 
    ) 
 
    } 
 
}

Comme vous pouvez le voir, le composant parent App passe un accessoire, et une fonction qui peut changer la valeur de cette prop à son composant enfant, contenu.

Le composant contenu serait alors faire quelque chose comme ceci:

//Content.js 
 
import React, { Component } from 'react'; 
 

 
class Content extends Component { 
 
    constructor(props){ 
 
     super(props) 
 
    } 
 
    
 
    gotoAbout() { 
 
     this.props.gotoAbout() 
 
    } 
 
    
 
    render(){ 
 
     if(this.props.page = 'home'){ 
 
     return(
 
      <div> 
 
      <p>this is the home content</p> 
 
      <button onClick={this.gotoAbout}></button> 
 
      </div> 
 
     ) 
 
     } else { 
 
     return(
 
      <p>this is the about content</p> 
 
     ) 
 
     } 
 
    } 
 
    }

Ce qui précède est un exemple simplifié, mais je pense qu'il obtient le point à travers. Quelle serait la meilleure façon d'écrire un test pour ce type de flux de composants-prop?

Answer 1

En général, je commence d'abord à tester les composants isolément en utilisant un rendu peu profond avec sa fonctionnalité attendue, puis à tester les composants avec la composition.

par exemple pour tester Content composant

1.test si elle se comporte correctement pour les accessoires ou change d'état

2.ÉQUIPEMENT si elle effectue le bouton tel événement de correctement comme clic ou tout autre événement grâce à la simulation

const wrapper 
= shallow(
      <Content 
       page={"home"} 
       gotoAbout={()=>{ console.log("fake goAbout")}} 
     /> 
); 

maintenant Vérifiez si la structure est adaptée rendu comme prévu pour prop page={"home"}

expect(wrapper.containsMatchingElement(
      <div> 
      <p>this is the home content</p> 
      <button onClick={this.gotoAbout}></button> 
      </div> 
)).to.equal(true); 

De même, effectuez un test pour un autre support page={"about"}, que le contenu s'affiche correctement ou non.

wrapper.setProps({ page: 'about' }); 

expect(wrapper.containsMatchingElement(
      <p>this is the about content</p> 
)).to.equal(true); 

Après cela, vous pouvez tester les événements bouton clic

clickCount = 0; 
const wrapper 
= shallow(
      <Content 
       page={"home"} 
       gotoAbout={()=>{ clickCount = clickCount + 1;}} 
     /> 
); 

Maintenant, vous pouvez vérifier si clickCount est supérieur à zéro, après avoir simulé l'événement click. Ensuite, vous pouvez commencer à tester le composant App.

const wrapper = shallow(<App />); 
const childWrapper = wrapper.find('Content'); 

Après cela, vous pouvez créer un autre composant contenu séparément par le rendu superficiel et correspondent à ceux deux pour l'égalité structure html, accessoires, etc. Les Etats

const twrapper 
= shallow(
      <Content 
       page={"home"} 
       gotoAbout={()=>{ console.log("fake goAbout")}} 
     /> 
); 

expect(twrapper.html()).to.equal(childWrapper.html()); 

Vous pouvez également vérifier si accessoire est passé correctement éléments enfants rendus -

expect(childWrapper.prop('page')).to.equal("home"); 

Il existe d'autres moyens plus efficaces pour tester les composants réactifs et ce ne sont que de simples exemples de test. Enzyme fournit beaucoup de façons de tester vos composants et il n'y a pas de règle stricte je suppose. Mais vous devriez au moins tester les fonctionnalités et fonctionnalités attendues de votre composant.

Vos scénarios de test vérifient également que les nouvelles modifications apportées au composant ne transgressent pas les spécifications de test.