Jest 是不是支持 ES6 导入/导出？

Posted 2023-03-08

【中文标题】Jest 是不是支持 ES6 导入/导出？

【英文标题】：Does Jest support ES6 import/export?Jest 是否支持 ES6 导入/导出？

【发布时间】：2016-06-15 20:27:31

【问题描述】：

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

意外的保留字

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

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

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

我有 babel-jest。我从 GitHub 问题中尝试了各种 suggestions。到目前为止还不行。

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

有解决办法吗？

【问题讨论】：

this 有帮助吗？

@GeorgePompidou - 可能。我不确定该解决方案是否/如何适用于 babel-jest

这是一个在 package.json 或 .babelrc 中指定类似 "presets": ["es2015"] 的问题。毕竟，您正在使用 babel。

@GeorgePompidou - 在这种情况下，解决方案不起作用。我已经有一个包含 es2015 的 babelrc，react presets。标准的转译工作，在 gulp 内部。只是Jest框架处理不了。

这个问题是 5 年前的问题，但是 jest 对 ES 模块的支持是实验性的。

【参考方案1】：

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

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

【讨论】：

PS：别忘了通过npm安装stage-0预设

永远不要在生产中使用stage-0 或任何stage-*。这个答案是不好的做法。使用preset-env

【参考方案2】：

除了安装babel-jest（现在Jest默认自带）之外，一定要安装regenerator-runtime。

【讨论】：

如果我使用像 presets: [['@babel/preset-env', targets: node: 'current']]; 这样的 babel 配置来配置 jest，则不需要再生器运行时（没有 node:'current' 部分，它确实对此发出警告）。见jestjs.io/docs/getting-started#using-babel

【参考方案3】：

从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 属性的其他选项。

【讨论】：

如果您不想用.babelrc 污染您的项目，您可以在package.json 中的babel 键下添加env 键。

我相信最近的@babel/plugin-transform-modules-commonjs 取代了transform-es2015-modules-commonjs

伙计，这让我永远！谢谢！

这应该是正确答案，太简单了。

@P.Brian.Mackey 当然！如果您已经测试了新方法，并且不再需要 Babel，这是个好消息，并且向社区更新有关更新方法的信息很重要。 :)

【参考方案4】：

我遇到了同样的问题。

这些是我所做的：

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

【参考方案5】：

对于更新的配置，我使用的是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

【讨论】：

为我工作！ babel 文档已更新为在正则表达式中指定 .ts 文件。不需要像 ts-jest 这样的 typescript 的任何其他依赖项。我确实需要@babel/preset-typescript。将其添加到 .babelrc 文件中的预设列表中。

这基本上是正确的答案。这是来自 jest 自己的文档 jestjs.io/docs/getting-started#using-babel

的另一个很好的参考页面

感谢这对我有用。到目前为止，您确实不需要将transform 添加到您的package.json。现在是默认设置。

【参考方案6】：

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

---

根据this issue，jest@25.4.0 提供了对 ESM 的原生支持。所以你不必再使用 babel 了。在撰写此答案时 (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'

（我希望将来会改变）

【讨论】：

什么是“jest-environment-node”，它与环境“节点”有何不同？

这是一个用于测试的测试环境。默认为jsdom。你可以在这里找到更多信息jestjs.io/docs/en/configuration#testenvironment-string

NODE_OPTIONS='--experimental-vm-modules' jest 运行起来有点干净

作为重要说明，本机支持目前不支持模拟

要完成这项工作的第四件事：package.json 应该包含 "type": "module" 以便 Node 将文件检测为 ESM，请参阅 nodejs.org/api/packages.html#packages_determining_module_system

【参考方案7】：

要添加对 React 和 react-testing-library 的支持，退出 CreateReactApp 并从 package.json 获取所有需要的 Jest 配置可能会很有用。它可以与另一个捆绑器一起使用，在我的例子中是 Rollup。

【参考方案8】：

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

应该不错！

【讨论】：

不！不会的！模拟将不起作用。

很抱歉听到这个消息。让jest 工作有一些细微差别，甚至在 Windows 和 Mac 上有时也会出现问题。 NS 你正在尝试做什么，但这里是a template repo，我用于具有完全工作的jest（使用nodemon）的Node 东西。它包括您可能想要或不想要的其他东西，但您至少可以用作指南？

我改为遵循这个答案。 ***.com/a/52224329/985942 基本上都是用 babel 把所有东西都转回 commonjs

对。这就是回购最终要做的事情。 ?

【参考方案9】：

以下是我如何为我的项目设置 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'
);