Импорт представления в jest для модульного тестирования дает ошибку нарушения инварианта - PullRequest
Новая
       34

Импорт представления в jest для модульного тестирования дает ошибку нарушения инварианта

0 голосов
/ 25 мая 2018

Мы пытались перенести наши модульные тесты в Jest (из Mocha Chai Expect) для существующего приложения, когда наша команда столкнулась с этой проблемой, где, как только мы пытаемся импортировать View (скажем, DummyView.js), мы получаем

Ошибка нарушения инварианта: необходимо передать компонент в функцию, возвращаемую функцией connect.Вместо этого получил 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 Ответ

0 голосов
/ 25 мая 2018

Обычно это проблема импорта / экспорта.Ваш синтаксис предполагает, что DummyView является экспортом по умолчанию.

Для того, чтобы ваш фрагмент работал, файл DummyView.js` должен выглядеть следующим образом. 

export default class DummyView extends React.Component {}

Следующее НЕ будетРАБОТА 

export class DummyView extends React.Component {}

И это тоже НЕ РАБОТАЕТ 

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