使用酶检查浅层渲染的儿童组件的道具

Question

我在理解酶的浅层渲染时遇到了问题.

我有一个WeatherApplication具有子组件的组件CitySelection.该CitySelection接收特性selectedCity是保持在WeatherApplicationS状态.

组件:

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

我毫不犹豫地测试了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仍然是汉堡.

我检查了再次调用render方法WeatherApplication并且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");    
});