Как проверить компонент React, который вызывает функцию у своего родителя, который изменяет реквизиты компонента?

Question

Проблема:

• реквизит компонентных для детей передаются как значения состояния Родителя.
• Ребенок имеет метод, который вызывает метод родителя, который обновляет состояние родителя.
• Когда состояние родителя обновляется, изменяется одно из значений поддержки ребенка. как в: <Child prop1={this.state.prop1}>

Каков правильный способ проверить, что этот процесс происходит так, как ожидалось?

Вот пример кода, чтобы сделать проблему яснее:

//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)} /> 
 
    ) 
 
    } 
 
}

Как вы можете видеть, родительский компонент App проходит подпорку, и функция, которая может изменить значение, что prop к его дочернему компоненту, Content.

Компонент Content затем сделать что-то вроде этого:

//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> 
 
     ) 
 
     } 
 
    } 
 
    }

выше упрощенный пример, но я думаю, что он получает через точку. Каким будет лучший способ написать тест для этого потока компонентов?

Answer 1

Обычно я сначала тестировал компоненты в изоляции, используя мелкую визуализацию с ожидаемой функциональностью, а затем тестировал компоненты с композицией.

например, чтобы проверить Content компоненту

1.Test ведет ли он правильно реквизита или изменения состояния

2.Test, если он выполняет мероприятия правильно, такие как нажатие кнопки или любые другие события посредством моделирования

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

Теперь Проверьте, оказывается структура соответствует, как ожидается, для опоры page={"home"}

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

Аналогично проверке на наличие других опор page={"about"}, независимо от того, правильно ли он отображается.

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

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

После этого вы можете проверить на кнопку событий щелчка

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

Теперь вы можете проверить, является ли ClickCount больше нуля, после имитации события щелчка.

wrapper.find('button').simulate('click'); 

После этого вы можете начать тестирование компонента App.

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

После этого вы можете создать другой контент компонент отдельно с помощью мелкого рисования и соответствуете этим два равному HTML структуры, реквизит, состояние и т.д.

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

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

Вы также можете проверить, правильно ли прошла проп к оказываемые дочерние элементы -

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

Возможно, имеется другой лучший способ для тестирования реагирующих компонентов, и это просто простые примеры испытаний. Фермент предоставляет множество способов протестировать ваши компоненты, и, как я полагаю, нет жесткого и правильного правила. Но вы должны хотя бы проверить ожидаемые функциональные возможности и функции вашего компонента.

Также ваши тестовые примеры удостоверяются, что любые новые изменения, внесенные в компонент, не нарушают вашу спецификацию теста.