Jest es6 模块：意外的模块导入

Question

我正在尝试测试需要导入 es6 模块的文件，如下所示：

https://repl.it/HG9t/0

看来我缺少一些配置以使其正常工作。

如果您可以使用另一个单元测试框架轻松实现这一点，我也很感兴趣。

预先感谢您的帮助。

Answer 1

1. 安装所需的依赖项：

yarn add --dev babel-jest @babel/core @babel/preset-env

或者

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

2. 在主文件夹中创建babel.config.js并将其粘贴到那里：

// babel.config.js
module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          node: 'current',
        },
      },
    ],
  ],
};

3. 确保package.json和jest.config.js中的所有 jest 设置都设置为默认值。

Answer 2

由于 node 不支持模块，因此您必须使用 Babel 编译文件。 查看有关如何配置 Jest 和 Babel 的文档

Answer 3

我对 npm 包 'rgb-hex' 和 'hex-rgb' 也有类似的问题，因为它们的主要导出是以 ES6 格式完成的。 我在 Jest 中使用了一个 Typescript 项目。 我认为错误来自 Jest 端而不是 Typescript，因为 Jest 在正确转译的 javascript 上工作（根据其自己的配置）。 潜在的问题是这些 ES6 风格的主要导出会导致 Jest 出现问题（不是 tsc 或 Typescript 链），因为您需要告诉 Jest 进行转译。

我找到了一个可用的配置，使用 package 'ts-jest' 和以下配置，基于简单的预设（唯一需要注意的是忽略模式）：

tsconfig.json：

{
    "compilerOptions": {
      "esModuleInterop": true,
      "module": "es2020",
      "moduleResolution": "nodenext",
      "forceConsistentCasingInFileNames": true,
      "strict": true,
      "skipLibCheck": true,
      "rootDir": "./",
      "allowJs": true
    },
    "ts-node": {
        "esm": true
    },
    "include": ["./ts-src/**/*"]
  }

玩笑.config.cjs

module.exports = {
  verbose: true,
  preset: 'ts-jest/presets/js-with-babel-esm',
  testEnvironment: 'node',
  transformIgnorePatterns: ['/node_modules/(?!(hex\-rgb|rgb\-hex)/)']
};

注意：根据“ts-jest”的文档，上面的预设设置很重要，你想要带有 esm 的 babel。

babel.config.cjs（完全是香草，但包含在内，我认为有必要）

module.exports = {
    presets: [['@babel/preset-env', {targets: {node: 'current'}}]],
  };

注意来自 node_modules 的内容的忽略模式。 您在正则表达式中使用带有分组的否定来告诉它“是的，除了这些特定的 package 模式之外，忽略 node_modules 进行转译”。 Jest 出现这些东西的原因是 node_modules 中的包通常不使用从它们的主文件 index.js 文件（或类似文件）导出的 ES6。 Jest通常不会转换它们，因为那样它就必须扫描所有的 node_modules。 因此，您使用那些忽略模式（带有一些违反直觉的正则表达式）来转换 node_modules 中的特定内容。

编辑：.cjs 扩展是因为我的整个项目在 package.json 中使用了"type": "module" 。 如果您将这些文件保留为 .js，您将得到一个非常具有描述性的错误。 .cjs 扩展告诉 Node 放轻松，只使用框架使用的当前规范格式的配置（这不是 ES6 ......大声笑 JS 永远不会改变）