在运行 Jest 测试时没有定义“恢复器运行时间”

标题差不多解释了我面临的问题。我尝试测试一个具有某种状态的 React组件，并尝试为该组件提供存储以获得它所需的内容。当我使用 Jest 运行组件测试时，会得到以下错误:

ReferenceError: regeneratorRuntime is not defined

我已经通过一些阅读确定，这是由于 babel-polyfill或 regenerator-runtime没有被正确地应用到 Jest。但是，我尝试安装这两个包并重新运行，结果没有任何变化。在阅读了 Jest Github 问题页面(删除自动包含巴贝尔聚合物 # 2755)之后，我发现到版本19为止，Jest 并没有自动包含 babel-polyfill。我的手动安装该软件包应该已经解决了这个问题，但它没有。我收集了一些我认为有关的文件

返回文章页面

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

返回文章页面

{
"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"
]
}

返回文章页面

{
"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"
}
}

69530

小开

最佳答案

I used import "babel-polyfill" and it solved my problem.

Update 2020: This answer is outdated, babel-polyfill is deprecated. Look into the docs and the answer by Jero.

小开

While importing babel-polyfill into each test worked, the Updated jest docs (v24) suggests setting this in your babel config. If you do this you should no longer need to import babel-polyfill. (Personally, I was missing the targets option from my preset-env config).

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

A word to the wise: specifying targets will override any browserslist config you have defined (that babel would otherwise use). So in a web project, you'll probably want to create a dynamic babel.config.js that is "jest-aware" so that you're only adding targets when it's a test environment. See the section titled "Making your Babel config jest-aware" in the jest docs.

小开

In case you are using a setupTests.js file you can import regenerator-runtime from there:

// setupTests.js


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


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

Then you can import setupTests.js to every test file or better yet, in your package.json just add setupFilesAfterEnv to the jest config:

// package.json


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

Don't forget to install the regenerator-runtime package:

$ yarn add regenerator-runtime --dev

There is no need to import the complete babel-polyfill (or @babel/polyfill if Babel ≥ v.7.0.0) that btw has been deprecated in favor of directly including core-js/stable and regenerator-runtime/runtime.

小开

Latest solution as of 2 Oct 2019 is to import following in your setupTests.js file.

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

babel-polyfill is deprecated.

小开

With babel-core@bridge installed and @babel/core@7:

I solved the issue by adding the plugin @babel/plugin-transform-runtime and passing to my babel config the following:

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

EDIT: Alternatively, as other people commented you can also add only one option to @babel/preset-env's config and it should work:

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

小开

For anyone experiencing this problem in 2020, after perusing SO thoroughly, here's information that I found missing from any other answers.

My project is configured as suggested in the Babel 7.9.0 setup. After following all of those steps and importing '@babel/register' into the top of both my entry points, the ReferenceError persisted. From the jest documentation, I found this, which fixed my problem:

// babel.config.js

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

Jest documentation reference

小开

Following up on Jero's answer. If you're using npm you could do npm i -D regenerator-runtime and then import 'regenerator-runtime/runtime'; in your test file.

小开

I am using Vuejs, Vue Jest in Laravel mix and this works for me

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();
});

小开

If someone landed here when searching for the error message but is not using Babel then it may be that an old Babel configuration file exists in the project directory since according to Jest documentation:

Making your Babel config jest-aware
[...]
Jest will automatically transform files if a babel configuration exists in your project. To avoid this behavior, you can explicitly reset the transform configuration option:
// jest.config.js
module.exports = {
transform: {},
};

小开

I have faced this problem while testing my endpoint with Supertest in NodeJS:

The problem was

"Test suite failed to run

ReferenceError: regeneratorRuntime is not defined "

The solution was:

I have installed:

npm install --save-dev @babel/plugin-transform-runtime

Then in .babelrc (besides other options):

I have added

{
"env": {
"test": {
"plugins": ["@babel/plugin-transform-runtime"]
}
}
}

小开

Why

According to the official Jest docs regenerator-runtime is not longer injected automagically.

Jest no longer automatically injects regenerator-runtime - if you get errors concerning it, make sure to configure Babel to properly transpile async functions, using e.g. @babel/preset-env. Related PR.

How

Looking at the PR a solution is available:

Install @babel/plugin-transform-runtime as a dev dependancy

npm install --save-dev @babel/plugin-transform-runtime

Install @babel/runtime as a dependancy

npm install @babel/runtime

Then chuck this into your babel configuration (babel.config.js):

{
"plugins": [
[ "@babel/plugin-transform-runtime", { "regenerator": true } ]
]
}