Javascript 用酶反应检测组分性质变化

我正在修改以下示例：

类Foo扩展了React.Component{
render（）{
返回(
{}} />
);
}
}
它（'应该通过，不通过'，（）=>{
const wrapper=mount（）；
expect（wrapper.find（'.foo'）.html（））.toBe（``）；
setProps（{name:'bar'}）；
expect（wrapper.find（'.bar'）.html（））.toBe（``）；
});
结果：预期“”为“”。

您可以从测试结果中看到，className属性在属性更改时已正确更新。但输入值仍然错误地设置为“foo”

---

关于如何将接收新道具的组件上的值正确更改为输入上的值属性，您有什么想法吗？

您必须在包装器上调用方法

.update（）

。（设置新道具后）这将强制更新组件，并且输入的值应该更改

---

您可以在这里了解更多信息：

请注意，OP使用的是mount，而不是shallow，因此正确的文档应该是；另一个注意事项是，setProp for mount接受第二个callback参数，该参数在操作完成后执行：

setProps（someProps，callback）

（参考：）

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">'.