The reaction of the test component is replaced by an enzyme

Question

I am modifying the example found here:

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

The test result shows that the className attribute was correctly updated when the scroll changed. But the input value is still incorrectly set to "foo".

Any ideas on how I can argue that the value was correctly changed on the component receiving the new details to the value attribute on the input?

Answer 1

You must call the .update() method on the wrapper. (Immediately after setting new details) This will lead to a component update, and the input value should change.

You can learn more about this here: http://airbnb.io/enzyme/docs/api/ShallowWrapper/update.html