【问题标题】: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-runtimeimport '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-jestts-jest。为简单起见,我建议使用ts-jest

        第一步:安装:

        npm i -D ts-jest @types/jestyarn 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 步:执行您的脚本。现在一切都应该设置好了。

        【讨论】:

          猜你喜欢
          • 2020-04-29
          • 1970-01-01
          • 2020-09-12
          • 2022-10-23
          • 1970-01-01
          • 2022-02-12
          • 1970-01-01
          • 2020-02-09
          相关资源
          最近更新 更多