Jest - SyntaxError:不能在module外使用导入语句

IT技术 javascript reactjs jestjs create-react-app
2021-05-17 11:51:43

我在jest:24.9.0没有任何配置的情况下使用,从 create-react-app 全局安装。在这些文件中,我使用了 es6 module。使用时没有错误"test": "react-scripts test"

但是,当我开始使用jestwith 时,"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
4个回答

Jest 不支持ES6module,因此当您直接使用 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 官方网站上查看更多详细信息

由于 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',
}

正如上面的答案所描述的,Jest 不支持 ES6 module。因此,我们需要将代码转换为支持的module类型。我们可以使用babel-jestts-jestts-jest为简单起见,我建议使用

第一步:安装:

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

第 2 步:配置

选项 1:创建一个 jest 配置文件 jest.config.js

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

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

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

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

不安装babel,尝试实验性 ESM,如本答案所示:https : //stackoverflow.com/a/70200697/5078874