Jest 不会转换模块 - SyntaxError: Cannot use import statement outside a module

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']

• 修改 transform 在 Jest 配置中设置为 '^.+\\.jsx?$': 'babel-jest', '^.+\\.tsx?$': 'ts-jest' 以及与此相关的所有其他可能性。

• 在 Jest 配置中， testPathIgnorePatterns ， transformIgnorePatterns

• 使用 .babel.config.js 而不是 .babelrc.js

…和更多。

我有这个设置：

包.json

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

.babelrc.js

 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',
  ],
}

变量.ts

 import { GlobalVars } from 'variables'

export const Vars = new GlobalVars()

变量.spec.ts

 import { Vars } from './variables.ts'

describe('Test The Package', () => {
  it('Should accept new variables', () => {
    Vars.newVariable = 'new variable'
    expect(Vars.newVariable).toEqual('new variable')
  })
})

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

原文由 dugong 发布，翻译遵循 CC BY-SA 4.0 许可协议

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"

原文由 dugong 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

偶然我发现了一个 hack 让 pre-processor 处理整个 node_modules 通常是禁止的：

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

 transformIgnorePatterns:
[
    'node_modules'
]

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

 transformIgnorePatterns:
[
    '//node_modules'
]

这是一个黑客？是的！这慢吗？是的！但适当地，它可以帮助需要快速修复的人。

原文由 Henry Ruhs 发布，翻译遵循 CC BY-SA 4.0 许可协议