私は使用してkarma-webpack
おり、複数の場所で使用するために React コンポーネントをリファクタリングしています。コンポーネントを独自のファイルに移動したので、後でページに含める HOC に/を適用することで、コンポーネントをインポートして別の方法で接続できます。mapStateToProps
mapDispatchToProps
シナリオは次のとおりです。
EventTable
- import
s EventTableComponent、connect
ed / ラップされたコンポーネント
をエクスポートしますMyEventTable
- import
s EventTableComponent、connect
ed / ラップされたコンポーネント
をエクスポートしますEventTableComponent
- データ行をレンダリングするために共有される小道具 / 動作を定義します
私がgit mv
EventTable にEventTableComponent
コードをリファクタリングして HOC にあるようにすると、テストはでのみconnected
インポートに失敗し始めます。Chrome は問題なく動作し、ビューは完全にレンダリングされます。QA は満足している、または満足しているはずですが、私のビルドは失敗します。EventTableComponent
karma-webpack
およびコンポーネントWrappedComponent
に対して が定義されていないため、ビルドが失敗します。これにより、概要にメッセージがスローされます ( ) が、これらのファイルのいずれもテストにインポートしません! 代わりに、karma webpack のビルド中、ただしテストを実行する前に失敗します。EventTable
MyEventTable
connect
cannot read displayName of undefined
ビューを破棄し、次のように「偽物」/「交換」を行うことで、ローカルでビルドを修正しました。
function EventTableComponent () {
return (<div>garbage here</div>);
}
ビルドは成功します。
このすべての中で最も紛らわしい部分は? 私は HOCをまったくテストしていません。私は EventTableComponent だけをテストにインポートしますが、 Redux Documentationkarma-webpack
で提案されているように.
説明するために最小限の例の要点を書きました: https://gist.github.com/zdd45/cbc981e385dc33d6920d7fcb55e7a3e0