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

Проблема:

  • Свойства компонента Child передаются как значения состояния Parent.
  • У Child есть метод, который вызывает метод Parent, который обновляет состояние Parent.
  • Когда состояние Parent обновляется, изменяется одно из значений свойства Child. как в: <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 передает опору и функцию, которая может изменять значение этой опоры для его дочернего компонента 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>
        )
      }
    }
  }

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


reactjs javascript enzyme tdd bdd
person Chris Katzmann    schedule 31.01.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

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

1. проверьте, правильно ли он ведет себя при изменениях свойств или состояний

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

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

Теперь проверьте, соответствует ли визуализированная структура, как ожидалось, для prop 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');

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

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

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

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

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

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

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

person WitVault    schedule 31.01.2017