javascript - 用 enzyme react 测试成分的变化

我正在修改此处找到的示例:

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'。

关于如何断言在接收到输入中的value属性的新属性的组件上正确更改了值的任何想法吗？

最佳答案

您必须在包装器上调用.update()方法。 (仅在设置新 Prop 后)这将强制更新组件，并且输入值应更改。

您可以在此处了解更多信息:http://airbnb.io/enzyme/docs/api/ShallowWrapper/update.html

关于javascript - 用 enzyme react 测试成分的变化，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34944907/