Question

我试图使用茉莉和业力在angular2 + webpack中运行一个简单的单元测试。以下是我的测试：

it('my test', () => {
    let myObject = new MyObject();
    myObject.name = 'My Name';
    expect(myObject.name).toBe('My Name');
});

运行时收到以下错误：

TypeError: index_1.MyObject is not a constructor

我还尝试了在我的项目中定义的枚举类型的简单javascript类型：

it('my test', () => {
    let myObject = {
        name = 'My Name',
        hairColor = HairColor.Brown
    }
    expect(myObject.name).toBe('My Name');
});

在这种情况下，我收到以下错误：

TypeError: Cannot read property 'Brown' of undefined

这是我的对象和枚举类型：

export class MyObject {
    name: string;
    family: string;
    hairColor: HairColor;
}

export enum HairColor {
    Brown,
    Black
}

看起来webpack没有向karma提供正确的输出js文件。以下是我的配置文件：

webpack.test.js

var webpack = require('webpack');
var helpers = require('./helpers');

module.exports = {
  devtool: 'inline-source-map',

  resolve: {
    extensions: ['.ts', '.js']
  },

  module: {
    rules: [
      {
        test: /\.ts$/,
        loaders: [
          {
            loader: 'awesome-typescript-loader',
            options: { configFileName: helpers.root('src', 'tsconfig.json') }
          } , 'angular2-template-loader', 'angular-router-loader'
        ]
      },
      {
        test: /\.html$/,
        loader: 'html-loader'

      },
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        loader: 'null-loader'
      },
      {
        test: /\.css$/,
        exclude: helpers.root('src', 'app'),
        loader: 'null-loader'
      },
      {
        test: /\.css$/,
        include: helpers.root('src', 'app'),
        loader: 'raw-loader'
      }
    ]
  },

  plugins: [
    new webpack.ContextReplacementPlugin(
      // The (\\|\/) piece accounts for path separators in *nix and Windows
      /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
      helpers.root('./src'), // location of your src
      {} // a map of your routes
    )
  ]
}

karma.config.js

var webpackConfig = require('./webpack.test');

module.exports = function (config) {
  var _config = {
    basePath: '',

    frameworks: ['jasmine'],

    files: [
      {pattern: './karma-test-shim.js', watched: false}
    ],

    preprocessors: {
      './karma-test-shim.js': ['webpack', 'sourcemap']
    },

    webpack: webpackConfig,

    webpackMiddleware: {
      stats: 'errors-only'
    },

    webpackServer: {
      noInfo: true
    },

    reporters: ['kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  };

  config.set(_config);
};

果报测试shim.js

Error.stackTraceLimit = Infinity;

require('core-js/es6');
require('core-js/es7/reflect');

require('zone.js/dist/zone');
require('zone.js/dist/long-stack-trace-zone');
require('zone.js/dist/proxy');
require('zone.js/dist/sync-test');
require('zone.js/dist/jasmine-patch');
require('zone.js/dist/async-test');
require('zone.js/dist/fake-async-test');

var appContext = require.context('../src', true, /\.spec\.ts/);

appContext.keys().forEach(appContext);

var testing = require('@angular/core/testing');
var browser = require('@angular/platform-browser-dynamic/testing');

testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());

Answer 1

问题是我从Barrel导入了MyObject和HairColor！如下所示：

import { HairColor } from '../index';

我将其更改为从其自己的文件导入，现在问题已解决！

import { HairColor } from '../enums/hair-color.enum';

TypeError：index_1.X不是构造函数 - Karma - Jasmine - Webpack

1 个答案: