9

ここにある例を変更しています：

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

テストの結果から、prop の変更時に className 属性が正しく更新されたことがわかります。しかし、入力の値は間違って 'foo' に設定されたままです。

入力の値属性に新しい小道具を受け取るコンポーネントで値が正しく変更されたことをどのように主張できるかについてのアイデアはありますか?

4

1 に答える 1

10

.update()ラッパーでメソッドを呼び出す必要があります。（新しい小道具を設定した直後）これにより、コンポーネントが強制的に更新され、入力の値が変更されます。

詳細については、こちらをご覧ください: http://airbnb.io/enzyme/docs/api/ShallowWrapper/update.html

于 2016-03-11T12:13:07.487 に答える