Проверка реквизита дочернего компонента с мелким рендерингом с использованием фермента

Question

У меня проблема с пониманием мелкой рендеринга фермента.

У меня есть компонент WeatherApplication который имеет дочерний компонент CitySelection. CitySelection получает объект selectedCity, который удерживается в состоянии WeatherApplication s.

Компонент:

export default class WeatherApplication extends React.Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
      city : "Hamburg" 
     } 
    } 

    selectCity(value) { 
     this.setState({ 
      city: value 
     }); 
    } 

    render() { 
     return (
      <div> 
       <CitySelection selectCity={this.selectCity.bind(this)} selectedCity={this.state.city} /> 
      </div> 
     ); 
    } 
} 

Я тестировал sussessfully что CitySeleciton существует и что selectedCity является «Гамбург» и правильной функции передается.

Теперь я хочу проверить поведение метода selectCity.

it("updates the temperature when the city is changed",() => { 
    var wrapper = shallow(<WeatherApplication/>); 
    wrapper.instance().selectCity("Bremen"); 

    var citySelection = wrapper.find(CitySelection); 
    expect(citySelection.props().selectedCity).toEqual("Bremen"); 

}); 

Этот тест не удается, так как значение citySelection.props().selectedCity еще Hamburg.

Я проверил, что снова вызван метод renderWeatherApplication, и this.state.city имеет правильное значение. Но я не могу получить его через реквизит.

Answer 1

Вызов wrapper.update() после selectCity() должен сделать трюк:

it("updates the temperature when the city is changed",() => { 
    var wrapper = shallow(<WeatherApplication/>); 
    wrapper.instance().selectCity("Bremen"); 
    wrapper.update(); 
    var citySelection = wrapper.find(CitySelection); 
    expect(citySelection.props().selectedCity).toEqual("Bremen");  
});