Babel 可以使用 Webpack 编译，但不能使用 Jest答案

【问题标题】：Babel compiles with Webpack but not with JestBabel 可以使用 Webpack 编译，但不能使用 Jest
【发布时间】：2018-05-08 22:04:01
【问题描述】：

我正在尝试设置 Jest 以使用带有 env 预设的 Babel 来处理我的 ES6 项目。该代码可与 Webpack 一起编译和工作，但不能与 Jest 一起使用。问题似乎与从 node_modules 内部转译代码有关。

package.json（纱线）：

{
  "name": "generative-toolbox",
  "version": "0.0.1",
  "main": "toolbox.js",
  "repository": "git@bitbucket.org:yojeek/generative-toolbox.git",
  "author": "msamoylov <antiplaka@gmail.com>",
  "license": "MIT",
  "private": true,
  "scripts": {
    "build": "yarn webpack --config webpack.config.js",
    "test": "jest --debug"
  },
  "devDependencies": {
    "babel-jest": "^22.4.3",
    "jest": "^22.4.3",
    "regenerator-runtime": "^0.11.1",
    "webpack-cli": "^2.1.2"
  },
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "babel-register": "^6.26.0",
    "dat.gui": "^0.7.1",
    "enumify": "^1.0.4",
    "event-pubsub": "^4.3.0",
    "webpack": "^4.6.0"
  },
  "babel": {
    "presets": [
      ["env"],
      "stage-2"
    ],
    "env": {
      "test": {
        "presets": [
          ["env", {
            "targets": {
              "node": "9.4.0"
            },
            "debug": true
          }],
          "stage-2"
        ]
      }
    }
  }
}

webpack.config.js：

var path = require("path");

module.exports = {
  entry: "./toolbox.js",
  mode: 'development',
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "generative.toolbox.js",
    publicPath: '/dist/',
    library : "GenT"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
}

来自 toolbox.js 的定义：

import EventPubSub from 'event-pubsub'

class GUI {
  gui
  config
  values

  constructor() {
    // some valid code
  }
}


class MIDI extends EventPubSub {
  midi

  constructor() {
    super()

    // some valid code down there
  }
}

test.js：

import {GUI, MIDI} from './toolbox.js'

test('gui sanity', () => { // <--- pass
  let gui = new GUI()
  expect(gui).toBeTruthy()
});

test('midi sanity', () => { // <--- fail
  let midi = new MIDI()
  expect(midi).toBeTruthy()
});

测试失败，结果如下：

TypeError: Class constructor EventPubSub cannot be invoked without 'new'

   99 |   midi
  100 | 
> 101 |   constructor() {
  102 |     super()
  103 | 
  104 |     // request MIDI access

  at new MIDI (toolbox.js:101:17)
  at Object.<anonymous> (test.js:15:14)

【问题讨论】：

标签： node.js webpack babeljs jestjs es6-class

【解决方案1】：

所以，因为我想从 node_modules 中扩展 ES6 类，所以我不得不在 jest config 中明确排除它：

  "jest": {
    "transformIgnorePatterns": [
      "/node_modules/(?!event-pubsub).+\\.js$"
    ]
  }

这样，模块将按原样（未转译）导入到我的测试中。

【讨论】：