笑话 - 语法错误：不能在模块外使用 import 语句答案

【问题标题】：Jest - SyntaxError: Cannot use import statement outside a module笑话 - 语法错误：不能在模块外使用 import 语句
【发布时间】：2020-05-09 19:00:22
【问题描述】：

我正在使用 jest:24.9.0 没有任何配置，从 create-react-app 全局安装。在这些文件中，我使用的是 es6 模块。使用"test": "react-scripts test"时没有报错

但是，当我将 jest 与 "test": "jest --config jest.config.js", 一起使用时，我看到以下错误。

 FAIL  src/configuration/notifications.test.js
  ● Test suite failed to run

    /var/www/management/node/src/configuration/notifications.test.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import notifications from './notifications';
                                                                                             ^^^^^^

    SyntaxError: Cannot use import statement outside a module

【问题讨论】：

标签： javascript reactjs jestjs create-react-app

【解决方案1】：

Jest 不支持 ES6 模块，因此当您直接使用 Jest 运行测试时会抛出此错误。如果你想这样运行，那么你必须添加 babel。

另一方面，当您使用 react-scripts 运行测试时，它会在后台使用 babel 来转换代码。

在较新版本的 jest 中，babel-jest 现在由 Jest 自动加载并完全集成

希望这能回答你的问题。

开玩笑地添加 babel。

安装

babel-jest 现在由 Jest 自动加载并完全集成。仅当您使用 babel-jest 转换 TypeScript 文件时才需要此步骤。

npm install --save-dev babel-jest

用法

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

{
  "scripts": {
    "test": "jest"
  },
  "jest": {
    "transform": {
      "^.+\\.[t|j]sx?$": "babel-jest"
    }
  }
}

创建.babelrc配置文件

在您的项目根目录中创建一个babel.config.json 配置并启用一些presets。

首先，您可以使用 env 预设，它为 ES2015+ 启用转换

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

为了启用预设，您必须在 babel.config.json 文件中定义它，如下所示：

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

查看Babel official site了解更多详情

【讨论】：

如何“添加 babel”？
非常感谢，我的希望几乎为零，这一切都会奏效，但确实如此
请注意 .babelrc 不起作用，您必须将其命名为 babel.config.json
我必须在我的测试文件顶部添加npm install regenerator-runtime 和import 'regenerator-runtime/runtime'

【解决方案2】：

由于 jest 不能很好地使用 esmodules，你需要在 jest.config.js 中添加这些配置来告诉 Jest 使用 commonJS 构建来代替

moduleNameMapper : {
        '^react-dnd$': 'react-dnd/dist/cjs',
        '^react-dnd-html5-backend$': 'react-dnd-html5-backend/dist/cjs',
        '^dnd-core$': 'dnd-core/dist/cjs',
}

【讨论】：

【解决方案3】：

如果不安装babel，请尝试以下答案中的实验性 ESM：https://stackoverflow.com/a/70200697/5078874

【讨论】：

【解决方案4】：

如上所述，Jest 不支持 ES6 模块。因此，我们需要将代码转换为支持的模块类型。我们可以使用babel-jest 或ts-jest。为简单起见，我建议使用ts-jest。

第一步：安装：

npm i -D ts-jest @types/jest 或 yarn add --dev ts-jest @types/jest

第 2 步：配置

选项1：创建一个笑话配置文件jest.config.js

module.exports = {
    transform: {
        '^.+\\.(ts|tsx)$': 'ts-jest',
    },
};

选项 2：将 jest 配置添加到 package.json

"jest": {
    "transform": {
        "^.+\\.(ts|tsx)$": "ts-jest"
    }
}

第 3 步：执行您的脚本。现在一切都应该设置好了。

【讨论】：