React＆Reduxの内部での酵素によるネストされたコンポーネントのテスト

Question

私は別の「接続されたコンポーネント」（つまりcontainer）をマウントするコンポーネントSampleComponentを持っています。私は（私はcomponentDidMountを必要とするので）INGのmountでSampleComponentをテストしようとすると、私はエラーを取得する：

Invariant Violation: Could not find "store" in either the context or props of "Connect(ContainerComponent)". Either wrap the root component in a , or explicitly pass "store" as a prop to "Connect(ContainerComponent)".

これをテストする最良の方法は何ですか？私は基本的にやった

Answer 1

は私redux店（とProvider）に持参し、次のようにユーティリティコンポーネントに包み：

export const CustomProvider = ({ children }) => { 
    return (
    <Provider store={store}> 
     {children} 
    </Provider> 
); 
}; 

、その後、私はSampleComponentをmountし、それに対してテストを実行します。

it('contains <ChildComponent/> Component',() => { 
    const wrapper = mount(
    <CustomProvider> 
     <SampleComponent {...defaultProps} /> 
    </CustomProvider> 
); 
    expect(wrapper.find(ChildComponent)).to.have.length(1); 
}); 

Answer 2

エンザイムズ・マウントは、オプションのパラメータをとります。あなたは

options.context: (Object [optional]): Context to be passed into the component

options.childContextTypes: (Object [optional]): Merged contextTypes for all children of the wrapper あるあなたがオプションでSampleComponentをマウントするだろう必要なもののために必要である二人はそうのようなオブジェクト：

const store = { 
    subscribe:() => {}, 
    dispatch:() => {}, 
    getState:() => ({ ... whatever state you need to pass in ... }) 
} 
const options = { 
    context: { store }, 
    childContextTypes: { store: React.PropTypes.object.isRequired } 
} 

const _wrapper = mount(<SampleComponent {...defaultProps} />, options) 

今すぐあなたのSampleComponentは、あなたがダウンしてコンテキストを渡します。

Answer 3

あなたは、この問題を解決するには、名前のエクスポートを使用することができます。

あなたが持っている必要があります。

export class SampleComponent extends React.Component{ 

をしていないと、このコンポーネントをインポートします。

class SampleComponent extends React.Component{ 
... 
    render(){ 
     <div></div> 
    } 
} 

export default connect(mapStateToProps, mapDispatchToProps)(SampleComponent) 

をあなたはクラスの前にエクスポートを追加することができますレキシブストア：

import { SampleComponent } from 'your-path/SampleComponent'; 

このソリューションでは、テストファイルにストアをインポートする必要はありません。

Answer 4

オプション1）コンテナコンポーネントをReact-ReduxのProviderコンポーネントでラップすることができます。したがって、このアプローチでは、実際にストアを参照してプロバイダに渡し、テスト対象のコンポーネントを内部に作成します。この方法の利点は、実際にテストのカスタムストアを作成できることです。この方法は、コンポーネントのRedux関連部分をテストする場合に便利です。 オプション2） Redux関連のテストを気にする必要はないかもしれません。コンポーネントのレンダリングとローカルの状態関連の動作をテストするだけの場合は、コンポーネントの未接続プレーンバージョンの名前付きエクスポートを追加するだけです。あなたのクラスに "export"キーワードを追加すると、クラスを2つの方法で中括弧{}でインポートできるようになりました。例：私はそこに誰にも役立ちます願ってい

import MyComponent from 'your-path/MyComponent'; // it needs a store because you use "default export" with connect 
import {MyComponent} from 'your-path/MyComponent'; // don't need store because you use "export" on top of your class. 

：あなたのテストファイル上の

export class MyComponent extends React.Component{ render(){ ... }} 

... 

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent) 

後で

。