Babel 和 Jest 配置：SyntaxError：无法在模块外部使用 import 语句

Question

我正在开发一个 Ruby on Rails 7 应用程序，其中包含一些使用 lit 元素编写的 JS Web 组件。我正在尝试将 Jest 添加到项目中，以便我们可以对 Web 组件进行单元测试。

\n

不使用 Typescript，只使用普通 JS。我正在运行节点 v18.12.1，npm v9.2.0。

\n

我按照 Jest 网站上的初始入门步骤进行操作：

\n

npm install --save-dev jest\n

\n

然后添加"scripts": { "test": "jest" }到package.json.

\n

我创建了一个简单的测试来尝试一下，它通过了，没有错误。

\n

然而，当我为导入 lit ( ) 的自定义 Web 组件之一添加测试后import {LitElement} from \'lit\';，我收到以下错误：

\n

Jest encountered an unexpected token\n\n    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.\n\n    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.\n\n    By default "node_modules" folder is ignored by transformers.\n\n    Here\'s what you can do:\n     \xe2\x80\xa2 If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.\n     \xe2\x80\xa2 If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript\n     \xe2\x80\xa2 To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.\n     \xe2\x80\xa2 If you need a custom transformation specify a "transform" option in your config.\n     \xe2\x80\xa2 If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.\n\n    You\'ll find more details and examples of these config options in the docs:\n    https://jestjs.io/docs/configuration\n    For information about custom transformations, see:\n    https://jestjs.io/docs/code-transformation\n\n    Details:\n\n    /home/app/service/app/javascript/test/utils/validators.test.js:1\n    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { IsNumber } from \'../../utils/validators.js\';\n                                                                                      ^^^^^^\n\n    SyntaxError: Cannot use import statement outside a module\n\n      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1495:14)\n

\n

阅读错误（并在此处检查并与 Google 博士一起检查），听起来使用 Babel 是正确的方法。所以，我去 Babel 安装页面开玩笑并按照他们的说明进行操作：

\n

npm install --save-dev babel-jest\n

\n

然后添加到package.json：

\n

  "jest": {\n    "transform": {\n      "^.+\\\\.[t|j]sx?$": "babel-jest"\n    }\n  },\n}\n

\n

然后安装babel预设环境：

\n

npm install @babel/preset-env --save-dev\n\n

\n

并添加babel.config.json：

\n

{\n  "presets": ["@babel/preset-env"]\n}\n

\n

我继续收到同样的错误。

\n

我的package.json：

\n

{\n  "scripts": {\n    "test": "jest"\n  },\n  "jest": {\n    "transform": {\n      "^.+\\\\.[t|j]sx?$": "babel-jest"\n    }\n  },\n  "devDependencies": {\n    "@babel/preset-env": "^7.20.2",\n    "babel-jest": "^29.4.3",\n    "jest": "^29.4.3",\n    "lit": "^2.6.1"\n  }\n}\n

\n

我的babel.config.json：

\n

{\n  "presets": ["@babel/preset-env"]\n}\n

\n

测试失败：

\n

import {SomeFunction} from \'/a-valid-path/my-custom.js\';\n\ndescribe(\'some tests\', () => {\n  test(\'a test\', () => {\n    expect(SomeFunction(some-value)).toBe(true);\n  });\n});\n

\n

在堆栈溢出上还有关于此问题的其他帖子。提供的所有解决方案似乎都表明我需要在 package.json 中的 jest 配置中添加一些transform设置transformIgnorePatterns（对于具有单独 jest 配置文件的人，则为 jest.config.js ），以便正确进行转译。

\n

例如这里推荐的解决方案是：

\n

"transform": {\n      "node_modules/variables/.+\\\\.(j|t)sx?$": "ts-jest" //I swapped in \'babel-jest\' here\n    },\n    "transformIgnorePatterns": [\n      "node_modules/(?!variables/.*)"\n    ]\n\n

\n

这是​

\n

  transform: {\n    "^.+\\\\.(js|ts)$": "ts-jest",\n  },\n  transformIgnorePatterns: [\n    "node_modules/(?!lit-html)",\n  ],\n

\n

这里的解决方案是添加"type": "module"到package.json。

\n

我在这里或其他网站上找到的这些或其他解决方案都不起作用。我不断收到同样的错误。

\n

有谁知道我错过了什么？

\n

Answer 1

这需要更多的尝试和错误，但我最终通过 "transformIgnorePatterns": []在 package.json 中设置：解决了这个问题。

看来设置必须存在，即使我没有给它一个值。完全删除transformIgnorePatterns会导致相同的错误。

最终工作配置：

包.json：

{
  "scripts": {
    "test": "jest"
  },
  "jest": {
    "transform": {
      "^.+\\.(js|ts)$": "babel-jest"
    },
    "transformIgnorePatterns": []
  },
  "devDependencies": {
    "@babel/preset-env": "^7.20.2",
    "babel-jest": "^29.4.3",
    "jest": "^29.4.3",
    "lit": "^2.6.1"
  }
}

Babel.config.json：

{
  "presets": ["@babel/preset-env"]
}