使用酶检查具有浅渲染的子组件的道具

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 是 "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 具有正确的值。但是我无法通过道具获取它。

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

使用酶检查具有浅渲染的子组件的道具

Checking props of a child component with shallow rendering using enzyme

reactjs

jasmine

enzyme