既存のアプリケーションの単体テストをJest(Mocha Chai Expectから)に移行しようとしていたときに、チームがこの問題に遭遇したときに、ビュー(DummyView.jsなど)をインポートしようとするとすぐに、
Invariant Violation error: You must pass a component to the function returned by connect. Instead received undefined.
すべてのテストコードをコメントアウトした場合でも、このエラーが発生します。インポート自体で失敗します。
このDummyView.jsは、コード内のコンテナー内で使用されます。
// DummyContainer.js
import { connect } from 'react-redux'
import DummyView from './DummyView.js'
const mapStateToProps = (state) => {
tabType: state.tabType,
miscProps: state.miscProps
}
const mapDispatchProps = (dispatch) => {...}
export default connect(mapStateToProps, mapDispatchToProps)(DummyView)
// DummyView.js
import React from 'react'
import Tab1Section from './Tab1Section'
import Tab2Section from './Tab2Section'
import Tab3Section from './Tab3Section'
const DummyView = ({tabType, miscProps}) => {
const TabRender = null
switch(tabType) {
case 1:
TabRender = <Tab1Section { ...miscProps } />
case 2:
TabRender = <Tab1Section { ...miscProps } />
case 3:
TabRender = <Tab1Section { ...miscProps } />
default:
TabRender = (
<div><span>Error</span><div>
)
}
return (TabRender)
}
export default DummyView
JestはDummyViewだけをテストすることを許可していませんか?なぜ/どのようにコンテナ内で使用されているかがわかりますか?
コンテナのみをテストするのは理にかなっていますか?ビューはそれとともにテストされると仮定しますか?
PS:不変条件違反は、HTMLがおそらく正しくフォーマットされていないことを知っています。しかし、インポートで失敗した場合、どのようにテストにアクセスできますか?
回答 1 件
関連記事
- ネイティブ要素UIフレームワークをインポートする際の不変違反
- 不変の違反:コンポーネント `Home`のビュー構成ゲッターコールバックは関数である必要があります(` undefined`を受信しました)
- React-nativeの「不変の違反:要素タイプが無効です」問題
- Python3フラスコをインポートすると、yoctoディストリビューションにwerkzeugtestが見つかりませんか?
- Invariant Violation:Invariant Violation:ReactChildrenonlyは、単一のReact要素の子を受け取ることが期待されます
- wasm-packの実行時にmysqlをインポートすると多くのエラーが発生する
- DjangoをORMとして使用するパッケージからインポートすると、ModuleNotFoundErrorが発生します
- react-native-elements:アイコンは不変違反エラーを投げます
- モーメントをAngularにインポートするとエラーが発生します
関連した質問
- setTimeoutは起動しますが、リダイレクトしません
- React-redux:後続の同じタイプの兄弟コンポーネントは異なるProp値で変更されません
- initialStateから特定の値を選択するにはどうすればよいですか?反応:戻ってきた
- setIntervalコールバック関数は動的ではありません(Reduxの小道具)
- オブジェクトスプレッドreduxjs/toolkitの使用方法
- KotlinJSでのユニットテスト
- propで未定義の値を言っているreact + reduxのjestテスト
- この例では、データはどのように分解されていますか?
- react jsでaxiosを使用して、本体が空のAPIでヘッダーを送信する方法は?
- URL変更時にredux状態をリセットする
これは通常、インポート/エクスポートの問題です。構文は
DummyView
を想定しています デフォルトのエクスポートになります。スニペットを機能させるには、DummyView.js`ファイルは次のようになります。
以下は機能しません
そして、これも機能しません