Jest 不会转换模块 - SyntaxError: 不能在模块外使用 import 语句

Question

SyntaxError: Cannot use import statement outside a module无论我尝试过什么，我都无法摆脱这个错误，这让我非常沮丧。有大佬解决了这个问题吗？我已经阅读了一百万个 stackoverflow 和 github 问题线程。没有明确的解决方案。

这是一个 React、Typescript、Webpack 项目。我正在尝试测试一个模块。但 Jest 不会改变以某种方式模块为普通的 javascript。

我得到的错误是

/Users/me/dev/Project/project/node_modules/variables/src/variables.js:12
    import './main.js';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      17 | 
      18 | */
    > 19 | import { GlobalVars } from 'variables'
         | ^
      20 | 
      21 | export const Vars = new GlobalVars()
      22 | 

我试图解决这个问题（但没有奏效）：

• 使用env设置babel.config：env.test.preset: ['@babel/plugin-transform-modules-commonjs']

• 修改transformJest 配置中的设置'^.+\\.jsx?$': 'babel-jest', '^.+\\.tsx?$': 'ts-jest'以及围绕此的所有其他可能性。

• 在 Jest 配置中testPathIgnorePatterns，transformIgnorePatterns

• 使用 .babel.config.js代替.babelrc.js

...和更多。

我有这个设置：

包.json

  "jest": {
    "preset": "ts-jest",
    "testEnvironment": "node"
  }

.babelrc.js

/Users/me/dev/Project/project/node_modules/variables/src/variables.js:12
    import './main.js';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      17 | 
      18 | */
    > 19 | import { GlobalVars } from 'variables'
         | ^
      20 | 
      21 | export const Vars = new GlobalVars()
      22 | 

变量.ts

  "jest": {
    "preset": "ts-jest",
    "testEnvironment": "node"
  }

变量.spec.ts

module.exports = {
  presets: [
    ['@babel/preset-env', { targets: { node: 'current' } }],
    '@babel/preset-react',
    '@babel/preset-typescript',
  ],
  plugins: [
    '@babel/plugin-transform-runtime',
    '@babel/proposal-class-properties',
    '@babel/transform-regenerator',
    '@babel/plugin-transform-template-literals',
    'react-hot-loader/babel',
  ],
}

关于如何解决这个问题的任何想法？

Answer 1

尽管我分别尝试过它们，但我还没有一起尝试过（transform和transformIgnorePatterns）。所以这个笑话配置解决了我的问题：

  "jest": {
    "preset": "ts-jest",
    "testEnvironment": "node",
    "transform": {
      "node_modules/variables/.+\\.(j|t)sx?$": "ts-jest"
    },
    "transformIgnorePatterns": [
      "node_modules/(?!variables/.*)"
    ]
  },

我的错误是：

1. 不使用transform和transformIgnorePatterns 一起。
2. 并定义babel-jest为转换器而不是ts-jest（我猜当jest的预设定义为时这是一个问题ts-jest。因为如果我将其更改为babel-jest它再次抛出相同的错误。）：

--- "node_modules/variables/.+\\.(j|t)sx?$": "babel-jest"
+++ "node_modules/variables/.+\\.(j|t)sx?$": "ts-jest"

Answer 2

我的问题在某种程度上有所不同，它jest会绊倒来自with.js的依赖项之一的文件。node_modulesSyntaxError: Cannot use import statement outside a module

我必须确保，这ts-jest不会忽略（在转换时）.js存在麻烦的依赖关系的文件。

仔细阅读预设后，我意识到，它让它们保持“原样” preset: 'ts-jest'。我将其更改为preset: 'ts-jest/presets/js-with-ts'并设置"allowJs": true为tsconfig.json.

为了不搞乱我的项目tsconfig.json，我有一个单独的项目jest。

最后我的jest.config.js样子主要是这样的：

module.exports = {
    preset: 'ts-jest/presets/js-with-ts',
    testEnvironment: "node",
    globals: {
        'ts-jest': {
            tsconfig: '<rootDir>/test/tsconfig.json',
        },
    },
    transformIgnorePatterns: [
        "node_modules/(?!troublesome-dependency/.*)",
    ],
}

PS 我不需要transform字段，因为预设已经在上面了。

PPS 我不需要介绍任何babel配置

Answer 3

使用维泰斯特。

我已经尝试过这里提出的大部分建议。我发现 Jest 正确安装非常痛苦，而 Vitest 无需任何配置即可开箱即用。这是我的个人经历。我花了几天时间才让 Jest 开始工作。我让 Vitest 在安装后立即工作。

我不想讨厌 Jest，实际上我认为它是一个很棒且直观的测试工具。但最终 Vitest “Just Works” ^（tm），您可以使用我们都喜欢的相同简单的 Jest 风格 API。

步骤（我使用 pnpm，但当然你可以使用yarn或npm做同样的事情）：

pnpm remove jest ts-jest @types/jest
pnpm add -D vite vitest

删除jest.config.js并创建vite.config.ts：

/// <reference types="vitest" />

import { defineConfig } from 'vite'

export default defineConfig({
  test: {
    /* for example, use global to avoid globals imports (describe, test, expect): */
    // globals: true,
  },
})

添加到您的测试中：

import { assert, expect, test } from 'vitest'

更新您的 package.json：

"test": "vitest",

Answer 4

由于 Jest 不能很好地使用 esmodules，因此您需要添加这些配置来jest.config.js告诉 Jest 使用commonJS构建来代替

moduleNameMapper: {
  '^variables$': 'variables/dist/cjs',
  '^[NAME OF MODULE YOU WANT TO IMPORT]$': '[NAME OF MODULE YOU WANT TO IMPORT]/dist/cjs'
}

Answer 5

这对我有用。

npm i ts-jest -D

在根目录中创建jest.config.js

然后将其添加到其中：

module.exports = {
  "roots": [
    "<rootDir>/src"
  ],
  "testMatch": [
    "**/__tests__/**/*.+(ts|tsx|js)",
    "**/?(*.)+(spec|test).+(ts|tsx|js)"
  ],
  "transform": {
    "^.+\\.(ts|tsx)$": "ts-jest"
  },
}

Answer 6

您不一定需要将变压器从 babel-jest 更改为 ts-jest。

反而：

1. 将您的重命名.babelrc为babel.config.json https://babeljs.io/docs/en/configuration#whats-your-use-case

2. 添加transformIgnorePatterns：

    "transformIgnorePatterns": [
      "node_modules/(?!variables/.*)"
    ]

这解决了与我类似的问题，而无需添加额外的转换模式。.babelrc是您项目的本地内容，因此不会应用于node_modulesJest 中。

Answer 7

偶然间，我发现了一个 hack 来处理通常被禁止的pre-processor全部内容：node_modules

默认情况下，变压器会忽略“node_modules”文件夹。

transformIgnorePatterns:
[
    'node_modules'
]

使用这种模式似乎绕过了 Jest 内部检查。

transformIgnorePatterns:
[
    '//node_modules'
]

这是黑客攻击吗？是的！这慢吗？是的！但如果正确的话，它可以帮助那些需要快速解决问题的人。