reactjs - 使用 enzyme 检查具有浅渲染的子组件的 Prop

Question

我在理解 enzyme 的浅层渲染时遇到问题。

我有一个组件WeatherApplication，它有一个子组件CitySelection。CitySelection 接收一个属性 selectedCity，该属性保存在 WeatherApplication 的状态中。

组件:

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 是“Hamburg”并且传递了正确的函数。

现在我想测试 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 的值仍然是汉堡。

我检查了 WeatherApplication 的 render 方法是否被再次调用，并且 this.state.city 具有正确的值。但我无法通过 props 获取它。

Answer 1

在 selectCity() 之后调用 wrapper.update() 应该可以解决问题:

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