Storeを明示的に「Connect（）」の小道具として渡す方法

Question

Reactコンポーネントをテストして、次のエラーが発生しています。

不変の違反：コンテキストまたは "Connect（）"の小道具に「ストア」が見つかりませんでした。プロバイダの<にルートコンポーネントをラップするか、明示的に "ストア"を "Connect（）"に渡します。

テストでコンポーネントをレンダリングするときにエラーが発生します。

beforeEach(() => { 
    Component = TestUtils.renderIntoDocument(<SideMenu />); 
}); 

コンポーネントをページでレンダリングすると問題なく動作します。しかし、テストでは、ストアに明示的にコンポーネントを渡すことができません。

誰かが正しい方向を指すことはできますか？

Answer 1

connectは、react-reduxによって提供されるデコレータである。 connect reduxにはスマートコンポーネントがあり、propまたはProvider経由でエラーメッセージが表示されるので、ストアを使用できるようになります。

スマートコンポーネントをテストしている間に、模擬ストアをpropとして提供することができます。しかし、別の子コンポーネントがある場合は、storeを期待している人は、propの方法では動作しません。ここで

はimportがstoreにサブスクライブ子コンポーネントsのコンポーネントにstoreを供給するための方法です。

const initialState = {key: 'value'}; 
const store = createStore(initialState); 

component = TestUtils.renderIntoDocument(
    <Provider store={store(initialState)}> 
    {() => <SideMenu />} 
    </Provider> 
); 

Answer 2

ほとんどの場合、テストでコンポーネント自体をインポートすると問題なく動作することがわかりました。

SideMenu.js：

export class SideMenu extends React.Component { 
// implementation 
} 

export default connect(mapStateToProps,)(SideMenu) 

SideMenu.spec.js：

import { SideMenu } from 'path/to/SideMenu.js' 

const props = { 
    // provide all necessary stubs and mocks for redux props and actions 
} 
component = TestUtils.renderIntoDocument(<SideMenu {...props} />); 

注：Салманが指摘したようにラインの下の別の子コンポーネントがある場合、このアプローチは動作しません、誰がstoreを期待していますか。