javascript - React testing component prop change with enzyme

I am modifying an example found here:

.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 ponent receiving new props to a value attribute on an input?

I am modifying an example found here:

https://github./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 ponent receiving new props to a value attribute on an input?

Share Improve this question asked Jan 22, 2016 at 10:51 Daniel Billingham 1,4115 gold badges16 silver badges25 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 11

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

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - React testing component prop change with enzyme - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)