React testing component prop change with enzyme

I am modifying an example found here:

https://github.com/airbnb/enzyme/blob/master/docs/api/ReactWrapper/setProps.md

  • Setting up Jest and Enzyme to test React 15 cannot find module react/lib/ReactTestUtils
  • Unable to set context when rendering child components
  • TypeError: Cannot read property 'prepareStyles' of undefined
  • Enzyme React setTimeout related testing causing errors
  • Enzyme testing an authentication Higher Order Component (HOC)
  • How to test inner functions defined on Stateless Components in React with Enzyme
  • 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?

  • React's async with enzyme and expect
  • TypeError: Cannot read property 'equal' of undefined
  • React Enzyme - Test `componentDidMount` Async Call
  • Test the content of an <iframe> in a React component with Enzyme
  • Setting up Jest and Enzyme to test React 15 cannot find module react/lib/ReactTestUtils
  • TypeError: Cannot read property 'prepareStyles' of undefined
  • One Solution collect form web for “React testing component prop change with enzyme”

    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