Question

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

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

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的{{3}}：

没有JSON表示的值（例如undefined和函数）不生成String。相反，他们产生未定义的值。

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

尝试执行console.log(Hello)或console.log(Hello.name)，这应分别产生[Function: Hello]和Hello。

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

1 个答案: