反应测试组件道具与酶

我修改在这里找到了一个改变。例如：反应测试组件道具与酶

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属性被正确更新道具变化的结果看。但是输入的值仍然被错误地设置为'foo'。

关于如何在接收新属性的组件上正确更改值的任何想法？

来源

2016-01-22 Daniel Billingham

您必须在包装上调用方法.update()。（就在您设置新道具之后）这将强制更新组件，并且输入的值应该改变。

你可以阅读更多关于它在这里：http://airbnb.io/enzyme/docs/api/ShallowWrapper/update.html

来源

2016-03-11 12:13:07 urbancvek

刚一说明，在OP使用坐骑，不浅，所以正确的文档应该是http://airbnb.io/enzyme/docs/api/ReactWrapper /update.html;另一个需要注意的是setProp for mount需要在操作完成后执行的第二个回调参数：'setProps（someProps，callback）'（ref：http：//airbnb.io/enzyme/docs/api/ReactWrapper/ setProps.html） – nbkhope

反应测试组件道具与酶

回答

相关问题