Jest 和 ES6 语法的问题答案

【问题标题】：Issue with Jest and ES6 syntaxJest 和 ES6 语法的问题
【发布时间】：2021-10-13 04:44:36
【问题描述】：

我有两个都使用import 的测试文件。一个通过，另一个抛出错误：

node_modules/@storybook/addon-docs/blocks.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import deprecate from 'util-deprecate';
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

    > 1 | import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';

我的 Jest 配置如下：

module.exports = {
  collectCoverageFrom: ['**/*.{js,jsx,ts,tsx}', '!**/*.d.ts', '!**/node_modules/**'],
  coverageThreshold: {
    global: {
      branches: 80,
      functions: 80,
      lines: 80,
      statements: -10,
    },
  },
  moduleNameMapper: {
    '^@app/(.*)$': '<rootDir>/$1',
    '^@components/(.*)$': '<rootDir>/components/$1',
    '^@graphql/(.*)$': '<rootDir>/graphql/$1',
    '^@lib/(.*)$': '<rootDir>/lib/$1',
  },
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  testPathIgnorePatterns: [
    '<rootDir>/node_modules/',
  ],
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }],
  },
  transformIgnorePatterns: ['/node_modules/'],
};

我对一个文件可以正常运行而另一个文件不能正常运行感到完全困惑。如果有人能指出我正确的方向，那将不胜感激。

【问题讨论】：

标签： javascript jestjs ts-jest babel-jest

【解决方案1】：

Jest 27.x.x 的实施变得更加严格。

我在使用 markdown npm 包时也遇到过类似的情况。

尝试改变：

transformIgnorePatterns: ['/node_modules/'],

到：

transformIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/node_modules/util-deprecate'],

Jest 在他们的网站上有this，他们解释了这个问题是如何出现的。

这里是逐字复制的问题的解释，其中重要的部分突出显示：

有时会发生（尤其是在 React Native 或 TypeScript 项目中）第 3 方模块发布为未转译。由于 node_modules 中的所有文件默认不进行转换，Jest 将无法理解这些模块中的代码，从而导致语法错误。为了克服这个问题，您可以使用transformIgnorePatterns 来允许转译此类模块。

【讨论】：

不幸的是，这并不能解决它。 :(我也很有希望，这完全有道理，似乎可以解决问题。