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

Question

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

我已经为我的测试用例创建了一个目录，名为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 模块？

- Jatin Mehrotra

---

你正在使用 Babel jest 吗？ - evolutionxbox

Babel jest并不会替代jest，而是与之配合使用。https://www.npmjs.com/package/babel-jest - evolutionxbox

谢谢您的输入，那么我的问题有什么解决方案吗？您能指导我如何进行配置吗？ - Jatin Mehrotra

是的，我已经安装了"@babel/core"、"@babel/preset-env"和"babel-jest"作为开发依赖，但我不知道如何配置它。你能给我发送一下"babel-jest"的配置吗？ - Jatin Mehrotra

我在readme中使用标准的https://github.com/facebook/jest#using-babel。我只是评论以尝试帮助，我没有确切的解决方案。 - evolutionxbox

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",

- tmhao2005

---

在我的情况下，因为我也在测试文件中使用了模块，所以我将测试文件的扩展名也改为.mjs，并稍微更改了testRegex模式，以便jest也可以检查.mjs文件：testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(mjs?|jsx?|js?|tsx?|ts?)$' - Eduardo Russo

Answer 2

分享我的解决方案，因为被接受的答案对我没有用。

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

一些关键点如下：

1. 确保将"mjs"包含在moduleFileExtensions中（如果你有以.mjs结尾的测试文件）。
2. 确保我的testMatch glob以.?js结尾（而不是.m?js，因为它是glob，而不是正则表达式）（同样，如果你的测试文件以.mjs结尾）。
3. 确保定义transformIgnorePatterns时不要包括"/node_modules/"，因为它通常是默认包含的。这确保了我的测试使用的依赖项也被转译。由于我所看到的帮助中很少提到这一点，因此这是一个问题。难道没人有使用 ES 模块的依赖关系吗？

至于需要安装的依赖项，我只需要添加jest和@babel/preset-env。为确保安全起见，您可能还要安装babel-jest和@babel/core，因为许多文档都是这么说的，但实际上它们是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"}
      }
    ]
  ]
}

- Nick S

---

我需要使用 .tests.mjs 文件进行工作，但是当使用 import 导入控制器或服务文件（例如 user.service.mjs）时，我遇到了以下错误：```ReferenceError: You are trying to import a file after the Jest environment has been torn down. From tests/sample.tests.mjs. at async Promise.all (index 2)```。 - Ali Shefaee

Answer 3

这是关于如何进行此操作的说明。具体内容可以在Jest文档中找到。

最简单的配置如下：

• disable transfrom in package.json:

  "jest": {
    "transform": {}
  }
  

• modify test script in package.json:

  "test": "NODE_OPTIONS=--experimental-vm-modules jest",
  

• create a function index.mjs:

  export const sum = (a, b) => a + b;
  

• write a test in index.test.js:

  import { sum } from './index.mjs';
  
  it('sum() returns sum of two numbers', () => {
    expect(sum(1,2)).toBe(3);
  };
  

- Oleh

---

我收到了错误信息：“NODE_OPTIONS”不被识别为内部或外部命令、可操作的程序或批处理文件。 - Tadas V.

NODE_OPTIONS 只是一个环境变量。 @TadasV。我猜你正在使用 Windows，请查看这个问题 https://dev59.com/ulQJ5IYBdhLWcg3wZU__ - Oleh

是的，这是一个Windows问题。使用命令node --experimental-vm-modules node_modules/jest/bin/jest.js可以解决该问题。 - Tadas V.

Answer 4

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

- OZZIE