`regeneratorRuntime` is not defined when running Jest test

Question

The title pretty much explains what I'm facing. I'm trying to test a React component that has some state, and I attempt to provide my store to the component in order to get what it needs. When I run the test of the component using Jest, I get the following error:

ReferenceError: regeneratorRuntime is not defined

I've determined through some reading that this is caused by babel-polyfill or regenerator-runtime not being applied correctly to Jest. However, I've tried installing both of those packages and re-running with no change in results. After reading the Jest Github issues page (Remove auto-inclusion of babel-polyfill #2755), I found out that babel-polyfill is not included automatically by Jest as of version 19. My manual installation of that package should have fixed the issue, but it did not. I've included some of the files that I think are relevant

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

Solution 1

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.

Solution 2

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.

Solution 3

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.

Solution 4

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

Solution 5

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

View more solutions

Comments

[Patrick Szalapski]

In what file did you import that?

[Caleb Swank]

I imported it into my actual test and that solved the issue.

[vsync]

Why didn't adding it globally in webpack config file entry solved it? importing it for each test isn't ideal

[Luc Kim-Hall]

babel-polyfill is deprecated. Don't use it. Look here for what happened any why: babeljs.io/blog/2019/03/19/…. Follow @jero's solution.

[sergioviniciuss]

in this case, if you're only introducing it to jest configs, shouldn't regenerator-runtime package be a dev dependency instead?

[Jero]

Yes @Periback, in the case you are using regenerator-runtime only for testing, you should include it as a dev dependencie. $ yarn add regenerator-runtime --dev

[Giorgio Tempesta]

This didn't solve my issue: only installing @babel/plugin-transform-runtime and configuring it as a plugin with "plugins": ["@babel/plugin-transform-runtime"] did solve the issue.

[Giorgio Tempesta]

This solved my issue, also without adding the regenerator: true option. Setting "plugins": ["@babel/plugin-transform-runtime"] was enough

[Jansky]

@rafafan2010 could you accept this as the answer? It's a much better answer in 2020. Doesn't involve adding another dependency. Has been supported since node 10, so no need for Babel.

[user616]

This also worked for me WITHOUT adding the regenerator: true option.

[gaurav5430]

do we need core js in jest ?

[eagercoder]

@PatrickSzalapski I imported it in the setupTests.js file

[ntilwalli]

Install @babel/plugin-transform-runtime @babel/runtime and add @babel/plugin-transform-runtime as a plugin to your babel.config.js. See here: stackoverflow.com/questions/50907975/…

[Adam]

The accepted answers work, but are terrible. The crux of the problem is, as this answer pointed out, correct babel.config.js configuration.

[Nico Toub]

This more generic answer is better: stackoverflow.com/a/56267658/1097926

[Muganwas]

This fixed my issue too, I was using '@bable/plugin-transform-modules-commonjs' and it wasn't working great for me.

[Josh Yolles]

Adding import 'regenerator-runtime/runtime' did it for me! Thanks!!

[Brandon Aaskov]

I had to addd that import line to both my globalSetup file and as a one-liner file for setupFilesAfterEnv. It certainly seems redundant to me but that's how I had to do it for it to work.

[Agniveer]

really helpful, was scratching my head for hours.

[Ilya Kushlianski]

Thank you so much, this helped a lot in 2021! Using babel 7.13

[xdumaine]

Adding it to globalSetup allowed me to get past the initial error once, then it threw in each individual test suite. Having it imported in my setup file doesn't seem to work or do anything.

[Jeremy Murray]

I agree this is likely the best answer for people running into this issue post-2020.

[Michael Keenan]

If you aren't already using a setupTests.js file, it may be simpler to add this to your jest.config file: setupFilesAfterEnv: [ require.resolve('regenerator-runtime/runtime') ],

[TommyAutoMagically]

While this answer might help some, it didn't solve it for me; what I needed was to import 'regenerator-runtime/runtime'

[Rex Osariemen]

@MichaelKeenan, the above solution setupFilesAfterEnv: [ require.resolve('regenerator-runtime/runtime') ] to jest.config file worked for me. Thank you!

[coderpc]

Alternate answer worked for me. Adding targets to @babel/preset-env

[xunux]

the second answer can also be found in the jest documentation on using it with babel

[Armando Júnior]

Yeap this setupFilesAfterEnv: [ require.resolve('regenerator-runtime/runtime') ], worked for me tks