2018-05-09 解决 Jest "SyntaxError Unexpected token import"

应该是 Jest “SyntaxError Unexpected token import” 最简单的解决方案。

背景

React 的 SPA 项目，使用 And Design 作为 UI 框架。使用 Jest + Enzyme 进行单体测试。

Antd 使用 babel-plugin-import 按需加载。 .babelrc

{
  "presets": ["env", "react", "stage-0"],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "libraryDirectory": "es",
        "style": true
      }
    ]
  ]
}

问题

Jest 执行测试时出现 SyntaxError: Unexpected token import 错误。

原因：Jest 无法理解 ES6 的 import 特性。

解决方法：

第 1 步：删掉 bebel-plugin-import 配置中 libraryDirectory 的部分。

// .babelrc
{
  "presets": ["env", "react", "stage-0"],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": true
      }
    ]
  ]
}

这时，运行 jest 会出现 ReferenceError: Select is not defined 错误。

第 2 步：安装 babel-plugin-transform-es2015-modules-commonjs

$ yarn add --dev babel-plugin-transform-es2015-modules-commonjs

更新 .babelrc

// .babelrc
{
  "presets": ["env", "react", "stage-0"],
  "plugins": [
    "transform-es2015-modules-commonjs",
    [
      "import",
      {
        "libraryName": "antd",
        "style": true
      }
    ]
  ]
}

再次运行 jest，问题解决了。

refs: