Reactjs `运行Jest测试时未定义regeneratorRuntime`

这个标题很好地解释了我面临的问题。我试图测试一个具有某种状态的

React

组件，并尝试向该组件提供我的存储，以获得它所需的内容。当我使用Jest运行组件测试时，出现以下错误：

ReferenceError:未定义regeneratorRuntime

通过一些阅读，我确定这是由

babel polyfill

或

再生器运行时

未正确应用于Jest造成的。但是，我已经尝试安装这两个软件包并重新运行，结果没有变化。在阅读Jest Github问题页面（）之后，我发现自版本19起，Jest不会自动包含

babel polyfill

。我手动安装的那个软件包应该已经解决了这个问题，但它没有。我已经包括了一些我认为相关的文件

.babelrc

：

{
  "presets": ["es2015", "react", "stage-2"],
  "env": {
    "development": {
      "plugins": [
        ["react-transform", {
          "transforms": [{
            "transform": "react-transform-hmr",
            "imports": ["react"],
            "locals": ["module"]
          }]
        }]
      ]
    }
  }
}

jest.config

：

{
    "transform": {
        "^.+\\.(js|jsx)$": "<rootDir>/node_modules/webpack-babel-jest",
        ".*\\.(vue)$": "<rootDir>/node_modules/jest-vue-preprocessor",
        ".*": "babel-jest"
    },
    "moduleNameMapper": {
        "\\.(jpg|jpeg|css|scss|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__tests__/__mocks__/fileMock.js",
        ".*\\.(vue)$": "vue/dist/vue.js"
    },
    "testPathIgnorePatterns": ["type_parser.spec.js", 
                               "<rootDir>/__tests__/__mocks__/",
                               "__tests__/unit/core/util/type_parser.js",
                               "__tests__/GitlabLoader.test.js"
                               ]
}

我使用了

导入“babel polyfill”

解决了我的问题

更新2020:

---

此答案已过时，

babel polyfill

已被弃用。查看和。

在将

巴贝尔polyfill

导入到每个工作的测试中时，建议在巴贝尔配置中设置此选项。如果执行此操作，则不再需要导入

babel polyfill

。（就我个人而言，我的

预设环境

配置中缺少了

目标

选项）

---

一句至理名言：指定

目标

将覆盖您定义的任何

浏览器列表

配置（否则巴贝尔会使用）。因此，在web项目中，您可能需要创建一个动态的

babel.config.js

，该动态的

babel.config.js

具有“jest-aware”特性，以便在测试环境中只添加

目标。如果您使用的是setupTests.js文件，您可以从该文件导入再生器运行时，请参阅中标题为“使您的Babel配置具有jest意识”的部分。
：

// setupTests.js

import 'regenerator-runtime/runtime'
import Enzyme from 'enzyme'
import EnzymeAdapter from 'enzyme-adapter-react-16'

Enzyme.configure({
  adapter: new EnzymeAdapter()
})




然后，您可以将setupTests.js导入每个测试文件，或者更好地导入package.json中，只需将setupfileafterenv添加到jest配置：

// package.json

{
  ...
  "dependencies": {
    ...
  },
  "devDependencies": {
    ...
  },
  "jest": {
    "setupFilesAfterEnv": ["./pathToYour/setupTests.js"] 
  }
}




不要忘记安装软件包：



无需导入完整的babel polyfill（或@babel/polyfill，如果是babel≥ v、 7.0.0）顺便说一句，btw一直赞成直接包括核心js/stable和再生器运行时/运行时。
截至2019年10月2日的最新解决方案是在您的
setupTests.js
文件中导入以下内容

import 'core-js/stable';
import 'regenerator-runtime/runtime';

babel polyfill
已被弃用。
使用
babel-core@bridge
已安装且
@babel/core@7
：

我通过添加插件并将以下内容传递到我的babel配置中解决了这个问题：

{
// ...
环境：{
测试：{
// ...
插件：[
“@babel/plugin转换运行时”
]
}
}
}

编辑：或者，因为您也可以只向
@babel/preset env
的配置中添加一个选项，并且它应该可以工作：

{
“预设”：[
[
“@babel/preset env”，
{
“目标”：{
“节点”：“当前”
}
}
]
]
}
对于2020年遇到此问题的人，在仔细阅读之后，我发现其他答案中缺少以下信息

我的项目已按照中的建议进行配置。
在完成所有这些步骤并将
“@babel/register”
导入到我的两个入口点的顶部之后，ReferenceError仍然存在。从jest文档中，我发现了以下内容，解决了我的问题：

//babel.config.js

跟进杰罗的回答。如果您使用的是npm，您可以执行
npm i-D再生器运行时
，然后
导入“再生器运行时/运行时”在您的测试文件中。
我正在使用Laravel mix中的Vuejs、Vue Jest，这对我很有用

import 'regenerator-runtime/runtime'
import { mount } from '@vue/test-utils'
import App from '../App';

// eslint-disable-next-line no-undef
test('it works', () => {
  // eslint-disable-next-line no-undef
  expect(1 + 1).toBe(2);
});

// eslint-disable-next-line no-undef
test('should mount without crashing', () => {
  const wrapper = mount(App);
  // eslint-disable-next-line no-undef
  expect(wrapper).toMatchSnapshot();
});


如果有人在搜索错误消息时登陆此处，但未使用巴贝尔，则可能是项目目录中存在旧的巴贝尔配置文件，因为：

让您的Babel配置了解笑话

[…]

如果使用babel配置，Jest将自动转换文件
存在于您的项目中。要避免这种行为，可以显式地
重置转换配置选项：

//jest.config.js
module.exports={
转换：{}，
};

“我的手动安装程序包应该已经解决了这个问题，但它没有。”您是否在任何地方导入该程序包？只是安装它没有任何作用。我试图通过在测试文件中导入“babel polyfill”
来提供它，以及在我的
.babelrc
的
插件部分提供它，没有任何更改。你是在什么文件中导入的？我将它导入到我的实际测试中，这解决了问题。为什么不在网页包配置文件
条目中全局添加它解决了问题？为每个测试导入它并不理想。不推荐使用Balabel polyfill。不要用它。看看这里发生了什么，为什么：。遵循@jero的解决方案。@PatrickSzalapski我在
setupTests.js
文件中导入了它。在这种情况下，如果您只是将其引入jest配置，那么再生器运行时包不应该是一个开发人员依赖项吗？是的@Periback，在您仅将再生器运行时用于测试的情况下，您应该将其作为开发人员依赖项包括在内
$Thread添加再生器运行时--dev
@Rafan2010您能接受这个答案吗？这是2020年更好的答案。不涉及添加另一个依赖项。从节点10开始就受支持，因此不需要Babel。添加
import'registrator runtime/runtime'
为我做到了这一点！谢谢我必须将该导入行添加到我的
globalSetup
文件中，并作为
setupFi的一行文件
$ yarn add regenerator-runtime --dev

import 'core-js/stable';
import 'regenerator-runtime/runtime';

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          node: 'current',
        },
      },
    ],
  ],
};

import 'regenerator-runtime/runtime'
import { mount } from '@vue/test-utils'
import App from '../App';

// eslint-disable-next-line no-undef
test('it works', () => {
  // eslint-disable-next-line no-undef
  expect(1 + 1).toBe(2);
});

// eslint-disable-next-line no-undef
test('should mount without crashing', () => {
  const wrapper = mount(App);
  // eslint-disable-next-line no-undef
  expect(wrapper).toMatchSnapshot();
});