我正在修改此处找到的示例:
https://github.com/airbnb/enzyme/blob/master/docs/api/ReactWrapper/setProps.md
class Foo extends React.Component {
render() {
return (
<input className={this.props.name} type="text" value={this.props.name} onChange={()=>{}} />
);
}
}
it('should pass and does not', ()=> {
const wrapper = mount(<Foo name="foo" />);
expect(wrapper.find('.foo').html()).toBe(`<input class="foo" type="text" value="foo">`);
wrapper.setProps({ name: 'bar' });
expect(wrapper.find('.bar').html()).toBe(`<input class="bar" type="text" value="bar">`);
});
Result: Expected '<input class="bar" type="text" value="foo">' to be '<input class="bar" type="text" value="bar">'.
从测试结果可以看出,className 属性在 prop 更改时正确更新。但是输入的值仍然错误地设置为“foo”。
关于如何断言组件上的值已正确更改为输入上的值属性接收新 Prop 的任何想法?
最佳答案
您必须在包装器上调用方法 .update()
。 (就在你设置新 Prop 之后)这将强制更新组件并且输入的值应该改变。
您可以在这里阅读更多相关信息:http://airbnb.io/enzyme/docs/api/ShallowWrapper/update.html
关于javascript - 用 enzyme react 测试组件 Prop 变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34944907/