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

Posted 2023-02-22

【中文标题】运行 Jest 测试时未定义`regeneratorRuntime`

【英文标题】：`regeneratorRuntime` is not defined when running Jest test

【发布时间】：2017-07-20 23:44:45

【问题描述】：

标题几乎解释了我所面临的问题。我正在尝试测试具有某种状态的React 组件，并且我尝试将我的商店提供给组件以获得它需要的东西。当我使用 Jest 运行组件测试时，出现以下错误：

ReferenceError: regeneratorRuntime is not defined

我通过阅读确定这是由于 babel-polyfill 或 regenerator-runtime 未正确应用于 Jest 造成的。但是，我尝试安装这两个软件包并重新运行，结果没有任何变化。在阅读了 Jest Github 问题页面 (Remove auto-inclusion of babel-polyfill #2755) 后，我发现 Jest 从版本 19 开始不自动包含 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"
                               ]

package.json:

  "name": "my_project",
  "version": "0.2.0",
  "description": "My Project",
  "scripts": 
    "clean:build": "node ./bin/clean.js createdir",
    "build:html": "node ./bin/buildHtml.js",
    "deployProduction": "node ./bin/deployProduction.js",
    "start": "webpack-dev-server --config ./config/webpack.config.dev.js --hot --inline --progress",
    "serve": "npm run deployProduction&& supervisor --watch ./production-copy src/js/server",
    "prebuild": "npm run clean:build",
    "postbuild": "node ./bin/postBuild.js",
    "rebuild-win": "set BUILD_TYPE=preview& npm run prebuild & npm run build-win & npm run serve",
    "build": "set BUILD_TYPE=final& npm run prebuild & npm run build-win",
    "deploy": "npm run build & npm run serve",
    "build-win": "set NODE_ENV=production & npm run element-build & npm run build-doc & npm run build:html &  webpack -p --config ./config/webpack.config.prod.js --json > webpack.log.json & npm run postbuild",
    "lint": "eslint config src/js/**/*.js",
    "jscs": "jscs src/js/",
    "test": "jest --no-cache --verbose --config=./__tests__/jest.config",
    "test:watch": "npm run test -- --watch",
    "element-init": "node node_modules/element-theme/bin/element-theme -i src/js/core/ui/element-theme.css",
    "element-build": "node node_modules/element-theme/bin/element-theme -c src/js/core/ui/element-theme.css -o src/js/core/ui/element-theme ",
    "build-doc": "node bin/buildDoc.js ",
    "storybook": "start-storybook -p 9001 -c .storybook"
  ,
  "repository": 
    "type": "git",
    "url": "my_url"
  ,
  "license": "MIT",
  "bugs": 
    "url": "my_url"
  ,
  "homepage": "my_homepage",
  "dependencies": 
    "autoprefixer": "^6.3.6",
    "axios": "^0.11.1",
    "babel-runtime": "^6.23.0",
    "babel-standalone": "^6.10.3",
    "bluebird": "^3.4.0",
    "brace": "^0.8.0",
    "browserify": "^13.0.1",
    "chai": "^3.5.0",
    "classnames": "2.2.3",
    "cls-bluebird": "^1.0.1",
    "codemirror": "^5.16.0",
    "connect-history-api-fallback": "^1.3.0",
    "continuation-local-storage": "^3.1.7",
    "dateformat": "^1.0.12",
    "diff": "^3.0.1",
    "element-theme": "^0.4.0",
    "element-ui": "^1.1.5",
    "express-history-api-fallback": "^2.0.0",
    "filedrop": "^2.0.0",
    "fs-extra": "^0.30.0",
    "history": "^2.0.2",
    "humps": "^1.0.0",
    "immutability-helper": "^2.1.1",
    "isomorphic-fetch": "^2.2.1",
    "json-loader": "^0.5.4",
    "jszip": "^3.0.0",
    "jszip-utils": "0.0.2",
    "material-ui": "^0.16.7",
    "materialize-css": "^0.97.6",
    "mocha": "^2.5.3",
    "moment": "^2.17.1",
    "normalizr": "^1.0.0",
    "raven-js": "^3.9.1",
    "react": "^15.0.1",
    "react-ace": "^3.5.0",
    "react-addons-update": "^15.4.2",
    "react-dom": "^15.0.1",
    "react-redux": "^4.4.5",
    "react-router": "^2.3.0",
    "react-router-redux": "^4.0.2",
    "redux": "^3.4.0",
    "redux-logger": "^2.6.1",
    "redux-saga": "^0.9.5",
    "request": "^2.72.0",
    "request-promise": "^3.0.0",
    "reselect": "^2.5.4",
    "save-as": "^0.1.7",
    "showdown": "^1.4.2",
    "three": "^0.79.0",
    "url-pattern": "^1.0.3",
    "vue": "^2.0.5",
    "vue-easy-slider": "^1.4.0",
    "vue-loader": "^9.8.1",
    "vue-router": "^2.0.1",
    "vue-slider-component": "^2.0.4",
    "walk": "^2.3.9"
  ,
  "devDependencies": 
    "@kadira/storybook": "^2.35.3",
    "babel-core": "^6.7.6",
    "babel-eslint": "^6.1.0",
    "babel-jest": "^18.0.0",
    "babel-loader": "^6.0.2",
    "babel-plugin-react-transform": "^2.0.2",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-es2016": "^6.22.0",
    "babel-preset-react": "^6.23.0",
    "babel-preset-stage-2": "^6.5.0",
    "babel-register": "^6.7.2",
    "chai": "3.5.0",
    "chai-jquery": "2.0.0",
    "cheerio": "0.20.0",
    "colors": "1.1.2",
    "concurrently": "^2.0.0",
    "copy-webpack-plugin": "2.1.1",
    "css-loader": "0.23.1",
    "element-theme-default": "^1.1.5",
    "enzyme": "^2.7.1",
    "eslint": "^2.13.1",
    "eslint-config-airbnb": "^9.0.1",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^4.0.0",
    "eslint-plugin-react": "^5.2.2",
    "express": "^4.13.4",
    "extract-text-webpack-plugin": "1.0.1",
    "file-loader": "0.8.5",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^19.0.2",
    "jest-cli": "^18.1.0",
    "jest-css-modules": "^1.1.0",
    "jest-enzyme": "^2.1.2",
    "jest-vue-preprocessor": "^0.1.2",
    "jquery": "2.2.3",
    "jscs": "3.0.3",
    "jsdoc-to-markdown": "^2.0.0",
    "jsdom": "8.4.0",
    "json-loader": "^0.5.4",
    "mocha": "^2.4.5",
    "ncp": "^2.0.0",
    "node-sass": "3.7.0",
    "postcss-loader": "0.8.2",
    "react-addons-test-utils": "^15.4.2",
    "react-hot-loader": "1.3.0",
    "react-test-renderer": "^15.4.2",
    "react-transform-hmr": "^1.0.4",
    "redux-devtools": "^3.3.1",
    "redux-devtools-dock-monitor": "^1.1.1",
    "redux-devtools-log-monitor": "^1.0.11",
    "regenerator-runtime": "^0.10.3",
    "remotedev": "^0.1.2",
    "rimraf": "^2.5.2",
    "sass-loader": "3.2.0",
    "storybook-addon-material-ui": "^0.7.6",
    "style-loader": "0.13.1",
    "url-loader": "0.5.7",
    "vueify": "^9.4.0",
    "webpack": "^1.13.0",
    "webpack-babel-jest": "^1.0.4",
    "webpack-dev-middleware": "^1.6.1",
    "webpack-dev-server": "^1.16.3",
    "webpack-hot-middleware": "^2.10.0"
  

【问题讨论】：

“我手动安装的那个包应该可以解决这个问题，但它没有。” 你是在任何地方导入包吗？只是安装它没有任何作用。

我尝试通过在我的测试文件中执行import "babel-polyfill" 来提供它，并在我的.babelrc 的plugins 部分中提供它而没有任何变化。

【参考方案1】：

如果您使用的是 setupTests.js 文件，您可以从那里导入 regenerator-runtime：

// 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 中，只需将 setupFilesAfterEnv 添加到 jest 配置中：

// package.json


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

  不要忘记安装regenerator-runtime 包：

$ yarn add regenerator-runtime --dev

  不需要导入完整的 babel-polyfill（或 @babel/polyfill，如果 Babel ≥ v.7.0.0），顺便说一句，deprecated 有利于直接包含 core-js/stable 和 regenerator-runtime/runtime。

【讨论】：

在这种情况下，如果您只是将它引入到 jest 配置中，那么 regenerator-runtime 包不应该成为开发依赖项吗？

是的@Periback，如果您仅将 regenerator-runtime 用于测试，则应将其作为开发依赖项包含在内。 $ yarn add regenerator-runtime --dev

@rafafan2010 你能接受这个作为答案吗？这是 2020 年更好的答案。不涉及添加另一个依赖项。从 node 10 开始支持，所以不需要 Babel。

添加import 'regenerator-runtime/runtime' 为我做了！谢谢！！

我必须将该导入行添加到我的globalSetup 文件和setupFilesAfterEnv 的单行文件中。这对我来说似乎是多余的，但这就是我必须这样做才能让它工作的方式。

【参考方案2】：

虽然将babel-polyfill 导入到每个测试中都有效，但Updated jest docs (v24) 建议在您的 babel 配置中进行设置。如果你这样做，你应该不再需要导入babel-polyfill。 （就我个人而言，我的preset-env 配置中缺少targets 选项）。

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

对聪明人说一句话：指定 targets 将覆盖您定义的任何 browserslist 配置（否则 babel 将使用该配置）。因此，在 Web 项目中，您可能想要创建一个动态的 babel.config.js，它是“可笑的”，以便您只在测试环境时添加 targets。请参阅jest docs 中标题为“让您的 Babel 配置开玩笑”的部分。

【讨论】：

这并没有解决我的问题：仅安装 @babel/plugin-transform-runtime 并将其配置为带有 "plugins": ["@babel/plugin-transform-runtime"] 的插件确实解决了问题。

接受的答案有效，但很糟糕。正如这个答案所指出的那样，问题的症结在于正确的 babel.config.js 配置。

【参考方案3】：

我使用了import "babel-polyfill"，它解决了我的问题。

2020 年更新： 此答案已过时，babel-polyfill 已弃用。查看the docs 和the answer by Jero。

【讨论】：

你在哪个文件中导入的？

我将它导入到我的实际测试中并解决了这个问题。

为什么没有在 webpack 配置文件entry 中全局添加它解决了它？为每个测试导入它并不理想

babel-polyfill 已弃用。不要使用它。在这里查看发生了什么原因：babeljs.io/blog/2019/03/19/…。关注@jero 的解决方案。

@PatrickSzalapski 我将它导入到setupTests.js 文件中

【参考方案4】：

安装了babel-core@bridge 和@babel/core@7：

我通过添加插件 @babel/plugin-transform-runtime 并将以下内容传递给我的 babel 配置解决了这个问题：

 // ...
 env: 
   test: 
     // ...
      plugins: [
        '@babel/plugin-transform-runtime'
      ]
    
  

编辑：或者，作为other people commented，您也可以在@babel/preset-env的配置中只添加一个选项，它应该可以工作：

  "presets": [
    [
      "@babel/preset-env",
      
        "targets": 
          "node": "current"
        
      
    ]
  ]

【讨论】：

这解决了我的问题，也没有添加regenerator: true 选项。设置"plugins": ["@babel/plugin-transform-runtime"] 就足够了

这对我也有用，但没有添加 regenerator: true 选项。

这也解决了我的问题，我使用的是“@bable/plugin-transform-modules-commonjs”，但对我来说效果不佳。

【参考方案5】：

对于在 2020 年遇到此问题的任何人，在彻底阅读 SO 之后，我发现在任何其他答案中都缺少以下信息。

我的项目按照Babel 7.9.0 setup 中的建议进行配置。 在完成所有这些步骤并将'@babel/register' 导入到我的两个入口点的顶部之后，ReferenceError 仍然存在。从开玩笑的文档中，我发现了这个，它解决了我的问题：

// babel.config.js

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

Jest documentation reference

【讨论】：

非常感谢，这对 2021 年帮助很大！使用babel 7.13

我同意这可能是 2020 年后遇到此问题的人们的最佳答案。

虽然这个答案可能对一些人有所帮助，但它并没有为我解决问题；我需要的是import 'regenerator-runtime/runtime'

【参考方案6】：

截至 2019 年 10 月 2 日的最新解决方案是在您的 setupTests.js 文件中导入以下内容。

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

babel-polyfill 已弃用。

【讨论】：

我们需要核心js吗？

真的很有帮助，让我头疼了好几个小时。

【参考方案7】：

我在 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();
);

【参考方案8】：

跟进 Jero 的回答。如果您使用的是 npm，您可以在测试文件中执行 npm i -D regenerator-runtime 和 import 'regenerator-runtime/runtime';。

【参考方案9】：

如果有人在搜索错误消息时登陆这里但没有使用 Babel，那么可能是因为 according to Jest documentation 之后项目目录中存在旧的 Babel 配置文件：

让您的 Babel 配置具有开玩笑意识 [...] 如果有 babel 配置，Jest 会自动转换文件 存在于您的项目中。为避免这种行为，您可以显式 重置转换配置选项：

// jest.config.js
module.exports = 
  transform: ,
;