Reduxを実装した後で基本的な反復テストが失敗する

Question

私はReduxを使ってReactをテストしようとしていますが、Facebook Create-Reactキットで簡単なアプリケーションをセットアップしています。

私は念の要素がレンダリングさせることになっている基本的なテストを持っている：

it('renders without crashing',() => { 
    const div = document.createElement('div'); 
    ReactDOM.render(< Companies/> , div); 
}); 

私はその要素にReduxのを実装するまで、それはそうと同じように、渡した：

今

function select(state) { 
    return {companies: state}; 
} 

export default connect(select)(Companies); 

、要素が確かにブラウザでレンダリングされているにもかかわらず、reduxの実装が正常に機能していれば、テスト結果にこのメッセージが表示されます。

私はこれで私のルートでこれを行っていたと思った：

let store = createStore(companyApp); 

ReactDOM.render(
    <Provider store={store}> 
    <Router history={browserHistory}> 
     <Route path="/" component={App}> 
     <Route path="/companies" component={Companies}> 
      <Route path=":id" component={Company}/> 
     </Route> 
    < /Route> 
    </Router> 
</Provider>, document.getElementById('root')); 

が、私は何かが欠けている必要があります。

Answer 1

これは、Companiesコンポーネントが接続コンポーネントであるために発生します。 テストで接続コンポーネントをレンダリングしようとすると、ストアが存在しないことが警告されます。これを解決するには、CompaniesコンポーネントをProviderのラップをテスト用に特別に作られたストアにラップするか、reduxストアを気にせずにコンポーネントのレンダリングをテストしたい場合は、rawコンポーネントを明示的にエクスポートすることができます：

export class Companies { 
    ... 
} 

export default connect(select)(Companies); 

とあなたのテストで

import { Companies } from ./Companies 

it('renders without crashing',() => { 
    const div = document.createElement('div'); 
    ReactDOM.render(< Companies companies={[]}/> , div); 
}); 

テスト接続されているコンポーネントは、ここでhttp://redux.js.org/docs/recipes/WritingTests.html#connected-components

詳細に記載されています