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

【问题标题】：Jest Is Not Transpiling ES6 Modules In Test (SyntaxError: Unexpected token export)Jest 没有在测试中转译 ES6 模块（SyntaxError: Unexpected token export）
【发布时间】：2018-10-07 18:21:16
【问题描述】：

让 Jest 了解 ES6 模块的导入/导出语法已经到了沸点，这阻碍了我的项目开发进度。我的项目结构如下：

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

org-services 在其包 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（如果我错了，请纠正我），但在我的 jest.config.js 中，对于 org-services，我有：

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 内）并在transform 键下包含'^.+\\.js$': 'babel-jest' 指令时，所有配置现在都应该可以正常工作jest.config.js 位于 org-services 下——但它没有。

关于这个问题，我已经尝试了我在网上可以找到的每一件事，但都没有成功。从那以后我什么也没做，我对这个测试框架和缺乏对 ES6 的支持失去了耐心。这不应该这么难，所以很明显我在这里做错了什么。请指教。

更新 1

发现另一个 SO 帖子反映了我所处的这种情况。 Jest fails to transpile import from npm linked module

很遗憾，提供的解决方案不适用于我的情况。

【问题讨论】：

您在这方面取得了进展吗？
@42tg 我无法解决这个问题。最后，在完全沮丧的情况下，我不得不将我单独的 org-module 打包项目合并到一个单一的整体包中。开箱即用不支持 Yarn-workspace 式的多包项目设置这一事实超出了我的范围。

标签： jestjs es6-modules babel-jest

【解决方案1】：

从@babel/xyz: 7.0.0 升级到 7.1.2 后，我开始收到有关“导入”的错误

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 转换，因为这是默认设置。

希望对你有帮助

【讨论】：