如果我使用 ES6 中的 import/export
,那么我所有的 Jest 测试都会失败并出现错误:
意外的保留字
我将我的测试对象转换为使用老式的 IIFE 语法,突然我的测试通过了。或者,采用更简单的测试用例:
var Validation = require('../src/components/validation/validation'); // PASS
//import * as Validation from '../src/components/validation/validation' // FAIL
同样的错误。显然这里的导入/导出存在问题。仅仅为了让我的测试框架满意而使用 ES5 语法重写我的代码对我来说是不切实际的。
我有巴别塔笑话。我尝试了来自 GitHub 问题的各种 suggestions。到目前为止还没有。
文件包.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"]
}
有解决办法吗?
从my answer到另一个问题,这可以更简单:
唯一的要求是将您的 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 的编译,而无需通知 package.json
内的 jest
属性的其他选项。
2020 年更新 - 对 ECMAScript 模块 (ESM) 的原生支持
根据 this issue,jest@25.4.0
提供了对 ESM 的本机支持。所以你不必再使用 babel 了。在撰写此答案 (05/2020) 时,要激活它,您需要做三件简单的事情:
确保不要通过在配置文件中设置 transform: {} 来转换 import 语句
运行节点@^12.16.0 || >=13.2.0 带有 --experimental-vm-modules 标志
使用 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'
(我希望这会在未来有所改变)
jsdom
。您可以在此处找到更多信息jestjs.io/docs/en/configuration#testenvironment-string
NODE_OPTIONS='--experimental-vm-modules' jest
运行起来有点干净
"type": "module"
,以便 Node 将文件检测为 ESM,请参阅 nodejs.org/api/packages.html#packages_determining_module_system
对于更新的配置,我使用的是 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
transform
添加到您的 package.json
。现在是默认设置。
在 package.json
中,请像这样设置:"test": "node --experimental-vm-modules node_modules/.bin/jest"
应该不错!
jest
工作有一些细微差别,甚至在 Windows 和 Mac 上有时也会出现问题。 NS 你正在尝试做什么,但这里是 a template 存储库,我用于具有完全工作 jest
(使用 nodemon
)的 Node 东西。它包括您可能想要或可能不想要的其他东西,但您至少可以用作指南?
只需将 stage-0 添加到您的 .babelrc 文件即可。这是一个例子:
{
"presets": ["es2015", "react", "stage-0"],
"plugins": ["transform-decorators-legacy"]
}
stage-0
或任何 stage-*
。这个答案是不好的做法。使用 preset-env
我遇到了同样的问题。
这些是我所做的:
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"]
}
下面是我如何为我的项目设置 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'
});
除了安装 babel-jest
(现在默认情况下与 Jest 一起提供)外,请务必安装 regenerator-runtime
。
{presets: [['@babel/preset-env', {targets: {node: 'current'}}]]};
这样的 babel 配置来配置 jest,则不需要再生器运行时(没有 node:'current' 部分,它确实对此发出警告)。请参阅jestjs.io/docs/getting-started#using-babel
要添加对 React 和 react-testing-library 的支持,弹出 CreateReactApp 并从 package.json
中获取所有需要的 Jest 配置可能会很有用。它已准备好与另一个捆绑器一起使用,在我的例子中是 Rollup。
.babelrc
污染您的项目,您可以在package.json
中的babel
键下添加上面的env
键。@babel/plugin-transform-modules-commonjs
取代了transform-es2015-modules-commonjs