SinonスタブインスタンスメソッドがmapDispatchToPropsで宣言されました

Question

テストとReact Reduxの新機能で、ここでいくつかの問題が混在する可能性があります。私は1つの例しか提示しませんが、私はmount(),shallow(),instance(),stub,spyなどの多くの異なる組み合わせを試みました。私はsetFooData()が呼ばれる条件の周りにいくつかのテスト、componentDidMount()とcomponentWillReceiveProps()などのライフサイクルメソッドで、すなわち条件を書きたい

const mapDispatchToProps = (dispatch, props) => ({ 
    setFooData(fooId, data) { 
     dispatch(Actions.setFooData(fooId, data)); 
    }, 
}); 

... 

return (
     <div fooId={this.props.fooId}> 
      <Foo {...fooProps}/> 
     </div> 
    ); 

：

は、コンポーネント、setFooData()アップデートReduxの状態とFoo.props.dataを考えます。

setFooData()は、サーバー呼び出しなどを含むので、これらのテストは、単にビュー層とどのコンポーネントがFoo.props.dataがsetFooData()によって最終的に設定された結果としてレンダリングに関係するので、setFooData()はstubのための良い候補のように思えます。

したがって、mount()ではなく、酵素shallow()が適切であると思われますか？私はstubsetFooData()にしてみてくださいどのような場合では、：wrapper.instance()はsetFooData()が実際に定義されていないオブジェクトを生成し、検査の際

Attempted to wrap undefined property setFooData as function

が、他によると：

let wrapper = return shallow(<Foo {...props}/>); 
let stub = sinon.stub(wrapper.instance(), 'setFooData'); 

私はエラーが表示されます例、私はそれがすべきだと思います。

さらに、setFooData()はwrapper.instance().selector.props上に存在する、及びlet stub = sinon.stub(wrapper.instance().selector.props, 'setFooData');私はオブジェクトsetFooData() =/= stubを検査する場合、エラーを回避し、機能をテストごとに呼び出されていない状態。

私が代わりにmount()を使用し、

let wrapper = mount(<Provider store={store}><Foo {...props}/></Provider>); 

let componentDidMountSpy = sinon.spy(Foo.prototype, 'componentDidMount'); 
let componentWillReceivePropsSpy = sinon.spy(Foo.prototype, 'componentWillReceiveProps'); 

expect(componentDidMountSpy.called).to.be.true;   //passes 
expect(componentWillReceivePropsSpy.called).to.be.true; //passes 
expect(stub.called).to.be.true;       //fails 

私はsetFooData()の身体に関連する表示された別のエラーが発生するので、setFooData()が呼ばれたが、関数が実際に実行されることから、その本当の体を防ぐために、スタブされていません。

ご理解いただきありがとうございます。

Answer 1

私はあなたが一番難しいと思っています。あなたはコンポーネントを単独でテストしなければならず、connectをテストしてください。 connectコンポーネントをテストする場合、統合テストを行い、実際にconnectが動作することを二重テストします。それはすでにあなたのための反応還元でテストされています。

代わりに、単体テストでアクション作成者をテストしてください。 次に、接続せずにexportという名前のコンポーネントをエクスポートし、接続バージョンのデフォルトのエクスポートを使用します。

このようにすれば、後でアサーションを簡単にするために、pure-Reactバージョンをインポートして、必要なものをpropsとして渡すことができます。

あなたは特に何かがそれらのライフサイクルメソッドで起こることをテストする必要がある場合は、あなたがinstanceからこれらのメソッドを呼び出すことができます。

const fakeActionCreator = sinon.spy() 
const subject = mount(<MyComponent doSomething={ fakeActionCreator } />) 
subject.instance().componentDidMount() 
assert.equal(fakeActionCreator.callCount, 1)