开玩笑导入 React 组件时出错答案

【问题标题】：Error importing React component in jest开玩笑导入 React 组件时出错
【发布时间】：2017-05-20 11:56:36
【问题描述】：

我正在尝试使用 Jest 测试一个基本的 React 组件，但在将组件导入我的测试时出现错误。它在我的测试之外运行良好。

错误是：

Invariant Violation：_registerComponent(...)：目标容器不是 DOM 元素。

App.js

const App = () => (
  <h1>Hello World</h1>
)

app.test.js

import React from 'react'
import App from '../app'

test('App renders', () => {
  ...
}

【问题讨论】：

你也可以显示你的测试代码吗？听起来您缺少要挂载到的组件的 DOM 元素。
老实说，目前我的测试中没有任何代码，因为它似乎在它到达之前就失败了，即导入
一个潜在问题：App 在 App.js 中定义，大写为 A，但从 ../app 导入时使用小写 a。
您的App.js export App 在任何地方都可以使用吗？

标签： javascript reactjs ecmascript-6 jestjs

【解决方案1】：

将以下内容添加到您的 config.js 或 package.json 中：

    {
        "env": {
            "development": {
                "plugins": ["transform-es2015-modules-commonjs"]
            },
            "test": {
                "plugins": ["transform-es2015-modules-commonjs", "@babel/plugin-proposal-class-properties"],
                "presets": [
                    "@babel/preset-react"
                ]
            }
        }
    }

【讨论】：