128

如果我import/export从 ES6 使用，那么我所有的 Jest 测试都会失败并出现错误：

意外的保留字

我将我的测试对象转换为使用老式的IIFE语法，突然我的测试通过了。或者，采用更简单的测试用例：

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

同样的错误。显然这里的导入/导出存在问题。仅仅为了让我的测试框架满意而使用 ES5 语法重写我的代码对我来说是不切实际的。

我有巴别塔笑话。我尝试了来自 GitHub 问题的各种建议。到目前为止还没有。

文件包.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"]
}

有解决办法吗？

4

9 回答 9

134

从我对另一个问题的回答来看，这可能更简单：

唯一的要求是将您的test环境配置为 Babel，并添加 ECMAScript 6 转换插件：

步骤1：

将您的test环境添加到.babelrc项目的根目录中：

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

第2步：

安装 ECMAScript 6 转换插件：

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

就是这样。Jest 会自动启用从 ECMAScript 模块到CommonJS的编译，而无需jest在package.json.

于 2018-09-07T14:12:01.910 回答
80

2020 年更新 - 对 ECMAScript 模块 (ESM) 的原生支持

根据这个问题，有来自.ESM 的原生支持jest@25.4.0。所以你不必再使用 babel 了。在撰写此答案 (05/2020) 时，要激活它，您需要做三件简单的事情：

  • 确保不要通过在配置文件中import设置来转换语句transform: {}
  • node@^12.16.0 || >=13.2.0带着--experimental-vm-modules旗帜奔跑
  • jest-environment-node使用or运行测试jest-environment-jsdom-sixteen。

因此，您的 Jest 配置文件至少应包含以下内容：

export default {
    testEnvironment: 'jest-environment-node',
    transform: {}
    ...
};

要设置--experimental-vm-modules标志，您必须按如下方式运行 Jest：

node --experimental-vm-modules node_modules/jest/bin/jest.js

另请注意，在 Github 问题中，此方法尚不支持该jest对象。所以你可能需要手动导入：

import {jest} from '@jest/globals'

（我希望这会在未来改变）

于 2020-05-07T08:03:54.267 回答
28

对于更新的配置，我正在使用https://babeljs.io/setup#installation

选择 JEST 并感到高兴：

作为参考，当前配置：

npm install --save-dev babel-jest

在您的package.json文件中，进行以下更改：

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

安装 babel 预设：

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

创建一个.babelrc文件：

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

运行你的测试：

npm run test
于 2020-01-13T14:08:33.043 回答
8

在package.json中，请像这样设置："test": "node --experimental-vm-modules node_modules/.bin/jest"

应该不错！

于 2021-07-08T20:52:25.067 回答
3

只需将 stage-0 添加到您的 .babelrc 文件即可。这是一个例子：

{
  "presets": ["es2015", "react", "stage-0"],
  "plugins": ["transform-decorators-legacy"]
}
于 2016-04-20T13:03:30.987 回答
1

我遇到了同样的问题。

这些是我所做的：

yarn add --dev babel-jest @babel/core @babel/preset-env

在 rootDir中创建文件jest.config.js 。

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/']
};

然后在 rootDir 中创建文件babal.config.js。

像这样去：

module.exports = {
    "presets": ["@babel/preset-env"]
}
于 2019-10-23T08:18:21.870 回答
0

除了安装babel-jest（现在默认情况下与 Jest 一起安装）外，请务必安装regenerator-runtime.

于 2017-09-15T19:07:08.137 回答
0

要添加对 React 和 react-testing-library 的支持，弹出CreateReactApp并从package.json. 它已准备好与另一个捆绑器一起使用，在我的例子中是 Rollup。

于 2021-03-16T21:26:56.467 回答
0

下面是我如何为我的项目设置 jest、typescript 和 ES 模块。

jest.config.js

/**
 * @type {import('ts-jest/dist/types').InitialOptionsTsJest} 
 * To configure ESM support, see: https://kulshekhar.github.io/ts-jest/docs/guides/esm-support
 * 
 **/
export default {
    preset: 'ts-jest/presets/default-esm',
    testEnvironment: 'node',
    extensionsToTreatAsEsm: ['.ts'],
    globals: {
        'ts-jest': {
            useESM: true
        }
    },
    setupFiles: ['<rootDir>/__tests__/setup.ts'],
};

tsconfig.json

{
    "compilerOptions": {
        "target": "ESNext",
        "module": "ESNext",
        "outDir": "./dist",
        "moduleResolution": "node",
       // "strict": true,
        "esModuleInterop": true,
        "inlineSourceMap": true,
    }
}

package.json脚本和 devDependencies

"scripts": {
    "start": "node ./dist/server.js",
    "dev": "tsc-watch --onSuccess \"node ./dist/server.js\"",
    "test": "cross-env NODE_OPTIONS=--experimental-vm-modules jest"
  },
"devDependencies": {
    "@jest/globals": "^27.4.4",
    "@types/express": "^4.17.13",
    "@types/jest": "^27.4.0",
    "@types/supertest": "^2.0.11",
    "cross-env": "^7.0.3",
    "supertest": "^6.2.1",
    "ts-jest": "^27.1.3"
  }

__tests__/setup.ts

import dotenv from 'dotenv';


dotenv.config({
    path: './.env.test'
});
于 2022-01-17T14:05:07.410 回答