実際にReduxのアクションクリエーターに接続されている小道具を模擬する方法は？

Question

統合テストでは、接続されたアクション作成者が呼び出されることをテストします。

describe('SomeContainer',() => { 
    let subject, store, fancyActionCreator 

    beforeEach(() => { 
    store = createStore(combineReducers({ /* ... */ })) 
    fancyActionCreator = sinon.spy() 
    const props = { 
     fancyActionCreator 
    } 
    subject = (
     <Provider store={store}> 
     <SomeContainer {...props} /> 
     </Provider> 
    ) 
    }) 

    it('calls fancyActionCreator on mount',() => { 
    mount(subject) 
    expect(fancyActionCreator.callCount).to.equal(1) 
    }) 
} 

アクションの作成者は、componentWillMountの内側と呼ばれ、テスト環境を超えて期待通りに動作します。

問題は、元のアクション作成者がテストで呼び出され、適切に嘲笑されないということです。あなたが店であなたのコンポーネントを搭載し

connect(mapStateToProps, { fancyActionCreator })(SomeContainer) 

Answer 1

：私はそれを感じました

は理由スパイを交換している再来のconnect()方法です。あなたがマウント呼び出しからの戻り値を取るなら、それはあなたに反応要素の酵素ラッパーを与えます。このラッパーは、ストアに対してアクションをディスパッチするために使用することができます。

const enzymeWrapper = mount(subject) 
enzymeWrapper.node.store.dispatch({ type: "ACTION", data: "your fake data" }); 

しかし、あなたが減速だけでなく、あなたの特性にReduxのストア状態の接続を使用しているため、これは、テストのより統合タイプです。

これは、Reduxストア状態のコンポーネントプロパティへの接続をテストするための唯一のテストです。他の方法でプロパティを偽装すると、コンポーネントのロジックをカバーするかもしれませんが、プロパティを格納するための接続が欠落しています。

コンポーネントをプレゼンテーションとコンテナのコンポーネントに分けることをお勧めします。プレゼンテーションでは店舗を使う必要はないので、さまざまなプロパティを渡すだけでロジックを叩くことができます。コンテナコンポーネントの関心事は、ストアをプレゼンテーションコンポーネントに接続することです。したがって、コンテナコンポーネントでは、私が記述したテストのタイプを使用します。 COMMENT ON

反応：

実際に接続されていない/プレゼンテーションコンポーネントのmount VS shallowの使用は、そのまっすぐことはありません。あなたのプレゼンテーションコンポーネントのサブコンポーネントをマウントでレンダリングする必要がある場合もあります（たとえば、何らかの理由でリアクション選択にDOMが必要）。

しかし、一般的にはい、あなたは :)が必要であることを理解していない限り、プレゼンテーションコンポーネントにshallowを使用するよう努力する必要があります。