bugfix> reactjs > 投稿

既存のアプリケーションの単体テストを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 件
  • これは通常、インポート/エクスポートの問題です。構文は DummyView を想定しています  デフォルトのエクスポートになります。

    スニペットを機能させるには、DummyView.js`ファイルは次のようになります。

    export default class DummyView extends React.Component {}
    
    

    以下は機能しません

    export class DummyView extends React.Component {}
    
    

    そして、これも機能しません

    class DummyView extends React.Component {}
    module.exports = DummyView
    
    

あなたの答え