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

Answer 1

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

Answer 2

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:

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

Answer 3

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: {},
};

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

Answer 5

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

Answer 6

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.

Answer 7

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.

Answer 8

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.

Answer 9

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

Answer 10

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.

Answer 11

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.