Jest在测试中没有将ES6模块转译（SyntaxError: Unexpected token export）

Question

我在使用Jest时遇到了困难，无法理解ES6模块的导入/导出语法，这妨碍了我的项目开发进度。我的项目结构如下：

root module
  org-domain (ES6)
  org-services (ES6)
  react-ui-module (React via CRA2)

org-services 在其 package json 中本地依赖于 org-domain：

// in org-services package.json

"dependencies": {
   "@org/domain": "file:../org-domain",
},

我在org-services中的.babelrc如下：

{
  "env": {
    "test": {
      "presets": ["@babel/preset-flow", "@babel/preset-env"]
      "plugins": ["@babel/plugin-transform-modules-commonjs"]
    }
  },
  "presets": [
    "@babel/preset-flow",
    ["@babel/preset-env", {
      "targets": {
        "esmodules": true
      }
    }]
  ],
  "plugins": [
    ["module-resolver", {
      "root": ["./node_modules/@org/domain"],
      "alias": {
        "@org/constants": "./node_modules/@org/domain/src/constants",
        "@org/contracts": "./node_modules/@org/domain/src/request-contracts"
      }
    }]
  ]
}

我不确定问题是否出在我的依赖项引入方式上，因此为了更加清晰明了，我将添加与导入/导出模块有关的细节。

在org-services的实现文件中，我使用npm的作用域语法导入org-domain，如下所示：import ... from '@org/domain

以下是我注意到的一些情况：

在本地开发中，当我尝试引用@org/domain时，它并没有被重定向到org-services/node_modules/@org/domain，而是被重定向到实际的相对目录位置root/org-services。我认为Jest忽略了node_modules（如果我错了请纠正），但在org-services的jest.config.js中，我写了如下配置：

collectCoverage: true,
coverageDirectory: 'coverage',
coveragePathIgnorePatterns: [
  '/node_modules/'
],
moduleDirectories: [
  'src',
  'node_modules'
],
moduleFileExtensions: [
  'js'
],
transform: {
  '^.+\\.js$': 'babel-jest'
},
transformIgnorePatterns: [
  'node_modules/(?!@org/domain)$'
]

据我所知，目前针对设置插件@babel/plugin-transform-modules-commonjs在测试环境（.babelrc中）以及在jest.config.js中的transform关键字下包括'^.+\\.js$': 'babel-jest'指令的所有配置都已经完成，应该可以正常工作——但事实并非如此。

我尝试了网上能找到的所有解决方案，但都没有成功。由于这个测试框架和对ES6语法的支持不足，在此之前我已经走投无路。这应该不是那么难解决，很明显我在这里做错了些什么，请给予指导。

更新1

发现了另一个SO帖子与我所处的情况相似。 Jest fails to transpile import from npm linked module 不幸的是，提供的解决方案并不能解决我的问题。

- Danchez

---

你在这方面有任何进展了吗？ - 42tg

@42tg 我无法解决这个问题。最终，我不得不将我的独立 org-module 打包项目合并为一个单一的、整体的包，以彻底消除挫败感。事实上，一个类似 Yarn-workspace 的多包项目设置不能被直接支持，这让我感到困惑。 - Danchez

Answer 1

从 @babel/xyz: 7.0.0 升级到 7.1.2 后，我开始遇到一个关于 "import" 的错误。

Jest encountered an unexpected token

<snip>

Details:

C:\....\SstcStrategy.test.js:2
import sequelizeFixtures from 'sequelize-fixtures';
^^^^^^

SyntaxError: Unexpected token import

  at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)

为了解决这个问题，我不得不像你在问题中提到的那样添加 @babel/plugin-transform-modules-commonjs。

现在我的 babel.config.js 看起来是这样的：

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          node: '8.10',
        },
        debug: false,
      },
    ],
  ],
  ignore: ['node_modules'],
  plugins: [
    '@babel/plugin-transform-runtime',
    '@babel/plugin-transform-modules-commonjs',

    // Stage 2
    ['@babel/plugin-proposal-decorators', { legacy: true }],
    '@babel/plugin-proposal-function-sent',
    '@babel/plugin-proposal-export-namespace-from',
    '@babel/plugin-proposal-numeric-separator',
    '@babel/plugin-proposal-throw-expressions',

    // Stage 3
    '@babel/plugin-syntax-dynamic-import',
    '@babel/plugin-syntax-import-meta',
    ['@babel/plugin-proposal-class-properties', { loose: false }],
    '@babel/plugin-proposal-json-strings',
  ],
};

顺便提一下，您不需要在jest.config.js中定义babel-jest转换器，因为这是默认设置。

希望这可以帮到您。

- alexb