Does Jest support ES6 import/export?

问题:

If I use import/export from ES6 then all my jest tests fail with error:

Unexpected reserved word

I convert my object under test to use old school IIFY syntax and suddenly my tests pass. Or, take an even simpler test case:

   var Validation = require('../src/components/validation/validation');//PASS
   //import * as Validation from '../src/components/validation/validation'//FAIL

Same error. Obviously there's a problem with import/export here. It's not practical for me to rewrite my code using ES5 syntax just to make my test framework happy.

I have babel-jest. I tried various suggestions from github issues. No go so far.

package.json

 "scripts": {
    "start": "webpack-dev-server",
    "test": "jest"
  },
      "jest": {
        "testPathDirs": [
          "__tests__"
        ],
        "testPathIgnorePatterns": [
          "/node_modules/"
        ],
        "testFileExtensions": ["es6", "js"],
        "moduleFileExtensions": ["js", "json", "es6"]
      },

babelrc

{
  "presets": ["es2015", "react"],
  "plugins": ["transform-decorators-legacy"]
}

Is there a fix for this?

回答1:

From my answer on another question, this can be simpler:

---

The only requirement is to config your test environment to Babel, and add the es2015 transform plugin:

---

Step 1:

Add your test environment to .babelrc in the root of your project:

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

Step 2:

Install the es2015 transform plugin:

npm install --save-dev @babel/plugin-transform-modules-commonjs

---

And that's it. Jest will enable compilation from ES modules to CommonJS automatically, without having to inform additional options to your jest property inside package.json.

回答2:

It's a matter of adding stage-0 to your .babelrc file. here is an example:

{
  "presets": ["es2015", "react", "stage-0"],
  "plugins": ["transform-decorators-legacy"]
}

回答3:

I encountered the same issue.

these are what i did yarn add --dev babel-jest @babel/core @babel/preset-env

make jest.config.js in rootDir

module.exports = {
    moduleFileExtensions: ["js", "json", "jsx", "ts", "tsx", "json"],
    transform: {
        '^.+\\.(js|jsx)?$': 'babel-jest'
    },
    testEnvironment: 'node',
    moduleNameMapper: {
        '^@/(.*)$': '<rootDir>/$1'
    },
    testMatch: [
        '<rootDir>/**/*.test.(js|jsx|ts|tsx)', '<rootDir>/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))'
    ],
    transformIgnorePatterns: ['<rootDir>/node_modules/']
};

then make babal.config.js in rootDir. go like this

module.exports = {
    "presets": ["@babel/preset-env"]
}

回答4:

In addition to installing babel-jest (which comes with jest by default now) be sure to install regenerator-runtime.

回答5:

For an updated config, I'm using https://babeljs.io/setup#installation

Select JEST and be happy:

As a reference, the current configuration:

npm install --save-dev babel-jest

In your package.json file make the following changes:

{
  "scripts": {
    "test": "jest"
  },
  "jest": {
    "transform": {
      "^.+\\.jsx?$": "babel-jest"
    }
  }
}

Install babel preset npm install @babel/preset-env --save-dev

Create a .babelrc file

{
  "presets": ["@babel/preset-env"]
}

Run your tests:

npm run test

回答6:

I solved it with .default.

Try var Validation = require('../src/components/validation/validation').default;