Question

我们试图将我们的单元测试迁移到Jest（来自Mocha Chai Expect）以获取现有应用程序，当我们的团队遇到此问题时，我们一旦尝试导入View（比如DummyView.js），我们就会得到

不变违规错误：您必须将组件传递给该函数通过connect返回。取而代之的是未定义。

即使我们已经注释掉所有测试代码，我们也会收到此错误。它导致导入失败。

这个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吗？为什么/如何知道它在容器内使用？

那么只测试一个容器是否有意义？假设View将与它一起测试？

PS：我知道不变违规意味着HTML可能格式不正确。但如果导入失败，我该如何进入测试？

Answer 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

在单元测试的导入中导入视图会产生不变的违规错误

1 个答案: