如何在 Jest 的 xyz.test.js 中导入“.mjs”模块？

Question

我想在 Jest 26.1.0 中使用 ES6 模块的 Import/export 功能（因为我的整个项目都在使用它）。

我为我的测试用例创建了一个名为 testCases/ 的目录，其中包含一个 math.mjs 文件。现在我正在尝试将此文件导入 math.test.js（对于 Jest）。每当我运行 npm run test 时，它都会抛出以下错误。

>Details:

    /home/jatin/Downloads/Node.js/task-manager-app/TestCases/math.test.js:1
    import calc from "../src/math.mjs";
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      at Runtime._execModule (node_modules/jest-runtime/build/index.js:1179:56)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.556 s
Ran all test suites.
npm ERR! Test failed.  See above for more details.

我什至尝试根据文档和其他 GitHub 问题更改 Jest 配置，但到目前为止没有成功。

下面是我的math.mjs测试文件

  const calc = (total, tippercent) => {
    const tip = total * tippercent;
    return total + tip;
}

export default calc

这是我的 math.test.js

import calc from "../src/math.mjs";

test("to calculate tipercent", () => {});

我们如何配置 Jest 来解析 .mjs 模块？

Answer 1

我认为它适用于以下设置：

在您的应用程序的根级别，jest.config.js：

module.exports = {
  testRegex: "(/__tests__/.*|(\.|/)(test|spec))\.(jsx?|js?|tsx?|ts?)$",
  transform: {
    "^.+\.jsx?$": "babel-jest",
    "^.+\.mjs$": "babel-jest",
  },
  testPathIgnorePatterns: ["<rootDir>/build/", "<rootDir>/node_modules/"],
  moduleFileExtensions: ["js", "jsx", "mjs"]
}

和 babel 配置 babel.config.js:

const presets = [
  [
    "@babel/preset-env",
  ]
];

module.exports = { presets };

最后你的脚本运行 package.json 中的测试：

"test": "jest --config=jest.config.js",

Answer 2

不支持ES模块:< https://github.com/facebook/jest/issues/4842

Answer 3

只是添加我的解决方案，因为已接受的答案对我不起作用。

当然，您的项目可能需要不同的设置。例如，我的测试文件以 .tests.mjs 结尾，但你的可能不是。此外，如果您不使用 Cypress，则您的 testPathIgnorePatterns 中不需要 "/cypress/"。

一些关键点是：

确保 "mjs" 包含在 moduleFileExtensions 中（如果您有以 .mjs 结尾的测试文件）。
确保我的 testMatch glob 以 .?js 结尾（不是 .m?js，因为它是一个 glob，而不是正则表达式）（同样，如果您的测试文件以 .mjs).
确保定义 transformIgnorePatterns 没有 "/node_modules/"，这通常默认包含。这确保我的测试使用的依赖项也被转译。出于某种原因，这在我看到的帮助中很少提及。没有人有使用 ES 模块的依赖吗？

至于要安装的依赖项，我只需要添加jest和@babel/preset-env。可以肯定的是，您可能还想安装 babel-jest 和 @babel/core，因为很多 documentation 都这么说，但看起来它们实际上是 jest 的依赖项所以他们也跟着来了。

这个 Jest 配置包含在我的 package.json 中（"jest" 是顶级密钥）：

  "jest": {
    "moduleFileExtensions": ["mjs", "js", "jsx", "ts", "tsx", "json", "node"],
    "testMatch": [
      "**/?(*.)tests.?js"
    ],
    "testPathIgnorePatterns": [
      "/node_modules/",
      "/cypress/"
    ],
    "transform": {
      "^.+\.m?js$": "babel-jest"
    },
    "transformIgnorePatterns": [
      "\.pnp\.[^\/]+$"
    ]
  }

这是我的babel.config.json。 请注意 在我的 package.json 中包含（逐字记录！）这不起作用。它必须是一个单独的文件。

{
  "presets": [
    [
      "@babel/preset-env", {
        "targets": {"node": "current"}
      }
    ]
  ]
}

如何在 Jest 的 xyz.test.js 中导入“.mjs”模块？

How to import ".mjs" modules in Jest's xyz.test.js?

javascript

node.js

jestjs

babel-jest