无法使用 karma-webpack 和 babel 导入 class。导入的 class 未定义

Question

我在一个项目中使用 karma-webpack 和 babel 来编写 ES6 测试，并使用 Jasmine 执行并导入我的单元测试使用的 ES6 classes。

我注意到我无法导出用 ES6 编写的 class 以在我的单元测试中使用它。这是我的代码：

Hello.js

export default class Hello {
  constructor() {
    this.a = 'b';
  }
}

Hello.test.js

"use strict";

import Hello from './hello';

describe(" hello unit tests", function () {
  console.log('Hello: ' + JSON.stringify(Hello));
});

当我运行karma start时，console.log显示：
PhantomJS 1.9.8 (Mac OS X 0.0.0) LOG LOG: 'Hello: undefined'

但我注意到，如果我将 Hello.js 文件中的代码替换为：

const Hello = {'a': 'b'};

export default Hello;

当我运行 karma start:
时有效 PhantomJS 1.9.8 (Mac OS X 0.0.0) LOG LOG: 'Hello: {"a":"b"}'

这是我的 karma.conf.js

var webpack = require("webpack");

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ["jasmine"],
    files: [
        "./tests/**/*.test.js"
    ],
    preprocessors: {
        "./tests/**/*.js": ["webpack",  "sourcemap"]
    },
    webpack: {
        module: {
            loaders: [{
              test: /\.js/,
              exclude: /(node_modules)/,
              loader: 'babel-loader'
            }]
        },
        devtool: "inline-source-map",
    },
    webpackMiddleware: {
        progress: false,
        stats: false,
        debug: true,
        noInfo: true,
        silent: true 
    },
    plugins: [
        require("karma-webpack"),
        require("karma-jasmine"),
        require("karma-phantomjs-launcher"),
        require("karma-sourcemap-loader"),
        require("karma-spec-reporter"),
    ],
    specReporter: {maxLogLines: 5},
    reporters: ["spec"],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ["PhantomJS"],
    singleRun: true
  });
};

我的项目结构：

karma.conf.js
tests/
  Hello.js
  Hello.test.js

有什么建议吗？

Answer 1

根据 JSON.stringify 的 ECMAScript specification：

Values that do not have a JSON representation (such as undefined and functions) do not produce a String. Instead they produce the undefined value.

由于类只是函数的语法糖，调用 JSON.stringify(class Foo {}) 将产生 undefined.

尝试console.log(Hello)或console.log(Hello.name)，它们应该分别产生[Function: Hello]和Hello。

无法使用 karma-webpack 和 babel 导入 class。导入的 class 未定义

Cannot import class using karma-webpack and babel. The imported class is undefined

javascript

ecmascript-6

karma-runner

webpack

babeljs