Jest 支持 ES6导入/导出吗？

如果我使用 ES6中的 import/export，那么我所有的 Jest 测试都会错误地失败:

出人意料的保留词

我将测试中的对象转换为使用老式的 生命语法，突然我的测试通过了。或者，以一个更简单的测试案例为例:

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

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

我有 babel-jest。我尝试了各种 建议从 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"]
}

有解决办法吗？

110709 次浏览
小开

这是在.babelrc 文件中添加 stage-0的问题:

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

除了安装 babel-jest(默认情况下现在是 Jest 附带的)之外，还要确保安装 regenerator-runtime。

小开

从 我的回答到另一个问题，这个问题可能更简单:

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

第一步:

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

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

第二步:

安装 ECMAScript 6转换插件:

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

就是这样。Jest 将启用从 ECMAScript 模块到 CommonJS的自动编译，而无需通知 package.json内部 jest属性的其他选项。

小开

我也遇到了同样的问题。

以下是我所做的:

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

在 根。中创建文件 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/']
};

然后在 根中创建文件 Babal.config.js。

像这样:

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

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

选择 JEST 并感到高兴:

作为参考，当前的配置:

npm install --save-dev babel-jest

在 包裹 Json文件中，进行以下更改:

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

安装标签预置:

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

创建一个 .babelrc文件:

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

进行测试:

npm run test
小开
最佳答案

UPDATE 2020-对 ECMAScript 模块(ESM)的本地支持

根据 这个问题，有来自 jest@25.4.0的 ESM 的本地支持。这样你就不用再用巴别塔了。在写这个答案的时候(05/2020) ，激活你需要做的三件简单的事情:

  • 确保不要通过在配置文件中设置 transform: {}来转换掉 import语句
  • 用 --experimental-vm-modules标志运行 node@^12.16.0 || >=13.2.0
  • 用 jest-environment-node或 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'

(我希望将来这种情况会改变)

小开

要添加对 React 和 response-test-library 的支持，可以从 package.json中弹出 CreateReactApp并获取所有需要的 Jest 配置。它已经准备好与另一个捆绑包一起使用，在我的情况下是 Rollup。

小开

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

应该不错！

小开

下面是我如何设置我的项目的笑话，打字稿和 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脚本和 devDependency

"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'
});
小开

所有的解释都在笑话文档中: 开玩笑的

1.

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

  1. 文件: babel.config.js

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

提交答案