import 在测试时返回未定义而不是反应组件答案

【问题标题】：import returns undefined instead of react component while testingimport 在测试时返回未定义而不是反应组件
【发布时间】：2017-10-03 18:48:48
【问题描述】：

我正在为我的应用程序创建测试，但在 Jest 中运行它们时遇到问题。我的代码结构是这样的：

<pre>
./src/
├── actions
│   ├── departments.js
│   ├── departments.test.js
├── actionTypes
│   ├── departmentsTypes.js
├── components
│   ├── common
│   │   ├── Form
│   │   │   ├── Form.css
│   │   │   ├── FormElement
│   │   │   │   ├── FormElement.css
│   │   │   │   ├── FormElement.js
│   │   │   │   ├── FormElement.test.js
│   │   │   │   └── __snapshots__
│   │   │   ├── Form.js
│   │   │   ├── Form.test.js
│   │   │   ├── index.js
│   │   │   └── __snapshots__
│   │   │       └── Form.test.js.snap
│   │   ├── index.js
│   │   ├── SchemaFormFactory
│   │   │   ├── SchemaFormFactory.js
│   │   │   ├── SchemaFormFactory.test.js
│   │   │   └── __snapshots__
│   │   │       └── SchemaFormFactory.test.js.snap
│   │   └── TextInput
│   ├── DepartmentSelector
│   │   ├── DepartmentSelector.css
│   │   ├── DepartmentSelector.js
│   │   ├── DepartmentSelector.test.js
│   │   ├── index.js
│   │   └── __snapshots__
│   ├── index.js
│   ├── MainApp
│   │   ├── index.js
│   │   ├── MainApp.css
│   │   ├── MainApp.js
│   │   ├── MainApp.test.js
│   │   └── __snapshots__
├── containers
│   ├── DepartmentForm
│   │   └── DepartmentForm.js
│   ├── DepartmentsSearch
│   │   ├── DepartmentsSearch.js
│   │   ├── DepartmentsSearch.test.js
│   │   ├── index.js
│   │   └── __snapshots__
├── helpers
│   └── test-helper.js
├── index.js
├── reducers
│   ├── departments.js
│   ├── departments.test.js
</pre>

我正在尝试对 FormElement (FormElement.test.js) 组件进行测试。在测试里面我有一个import语句：

import DepartmentsSearch from '../../../../containers/DepartmentsSearch/DepartmentsSearch'

我的 DepartmentSearch 是一个使用 react-redux 库中的连接的容器。

import DepartmentSelector from '../../components/DepartmentSelector/DepartmentSelector'
import {createDepartment} from '../../actions'

const mapStateToProps = (state) => {
  return {
    departments: state.departments
  }
}

export default connect(mapStateToProps, {createDepartment})(DepartmentSelector)

由于某种原因import DepartmentSelector 返回 undefined 而不是 react 组件（它只是一个哑组件而不是容器）。最奇怪的是，只有在运行测试时才会发生这种情况，而不是在浏览器中运行代码时发生。我一开始就尝试使用顶级导入，但也失败了。 import {DepartmentSelector} from '../../components'

我不知道为什么它可能仅在测试时失败，如果有人能指出我正确的方向，我会很高兴。

【问题讨论】：

标签： javascript reactjs testing redux jestjs

【解决方案1】：

问题在于如何完成依赖项的导入。在这种情况下，DepartmentSelector 导入了一个 Form，它导入了 FormElement 和 FormElement 导入了 DepartmentSearch（我们的容器）。因为节点不知道如何导入依赖项（递归依赖项），所以它只会返回一个错误。它可以在 Web 浏览器中运行，因为 webpack 可以很好地处理递归依赖项并从代码中提取它们。解决该问题的最简单解决方案是在测试文件顶部导入DepartmentSearch

// DepartmentSelector.test.js
import DepartmentSearch from '../../containers/DepartmentSearch/DepartmentSearch'

【讨论】：

【解决方案2】：

您的 DepartmentSearch 没有 render() 方法并且没有返回任何内容（因此是“未定义”）。

您至少需要通过render() 返回一些内容，无论是子节点、false 还是null。否则应用程序的其余部分不知道如何处理该组件。

【讨论】：

DepartmentSearch 是一个容器，它使用redux 状态和动作创建者的一部分来增强DepartmentSelector。它不应该有渲染，因为DepartmentSelector 有。就像我说过的那样，代码本身不是问题，它与运行测试有关，因为整个代码在浏览器中执行得很好。只有在运行测试时我才会遇到错误Invariant Violation: You must pass a component to the function returned by connect. Instead received undefined。