React testing component prop change with enzyme

Question

I am modifying an 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">'.

You can see from the result of the test that the className attribute was correctly updated on prop change. But the value of the input remains incorrectly set to 'foo'.

Any ideas on how I can assert that value has been correctly changed on the component receiving new props to a value attribute on an input?

urbancvek · Accepted Answer · 2016-03-11 12:13:07Z

11

You have to call a method .update() on a wrapper. (Just after you set new props) This will force update the component and the value of the input should change.

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

answered Mar 11, 2016 at 12:13

urbancvek

2712 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nbkhope Over a year ago

Just a note, the OP is using mount, not shallow, so the correct docs should be airbnb.io/enzyme/docs/api/ReactWrapper/update.html ; Another note is that setProp for mount takes a second, callback, argument that executes after the operation has been completed: setProps(someProps, callback) (ref: airbnb.io/enzyme/docs/api/ReactWrapper/setProps.html)

Collectives™ on Stack Overflow

React testing component prop change with enzyme

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related