Angular 2使用webpack测试业力找不到变量：地图答案

【问题标题】：Angular 2 testing karma with webpack Can't find variable: MapAngular 2使用webpack测试业力找不到变量：地图
【发布时间】：2017-03-01 11:43:41
【问题描述】：

我正在尝试使用 karma 和 webpack 测试我的指令。这是业力配置文件

module.exports = function (config) {
    config.set({
        basePath: './',
        frameworks: ["jasmine"],
        files: [
            {
            pattern: 'directive.spec.ts',
            watched: false
        }],
        exclude: [],
        preprocessors: {
            'directive.spec.ts': ['webpack', 'sourcemap']
        },
        webpackServer: {
            noInfo: true
        },
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: false,
        browsers: [
            "PhantomJS"
        ],
        singleRun: true,
        reporters: ['mocha'],
        webpack: {
            resolve: {
                extensions: ['', '.ts', '.js'],
                modulesDirectories: ['node_modules', '.'],
            },
            module: {
                loaders: [{
                    test: /\.ts$/,
                    loader: 'awesome-typescript-loader'
                }]
            },
            stats: {
                colors: true,
                reasons: true
            },
            debug: true,
            devtool: 'inline-source-map'
        }
    });
};

还有directive.spec.ts：

import { MyDirective } from './directive';
import {TestComponent} from './test';
import {
  async,
  inject,
  TestBed,
} from '@angular/core/testing';

describe('TestComponent', () => {

  let fixture: any;

beforeEach(() => {
  fixture = TestBed.configureTestingModule({
    declarations: [ TestComponent, MyDirective]
  })
  .createComponent(TestComponent);
  fixture.detectChanges();
});

  it('should work', () => {
    expect(true).toBe(true);
  });

但是当我尝试运行我的测试时，我收到了这个错误：

PhantomJS 2.1.1 (Mac OS X 0.0.0) 错误 ReferenceError: 找不到变量：在directive.spec.ts:1380处映射

我在这里错过了什么？

【问题讨论】：

行号很大，所以我认为它会将您的导入视为文件中的内容。我怀疑MyDirective 或TestComponent 在某处使用了Map 变量，但没有从某处定义它或import。您可以查看这些文件中是否/在哪里引用了Map，并找出它没有从哪里导入或定义。

标签： javascript testing angular webpack karma-jasmine

【解决方案1】：

请按照以下步骤操作。它对我有用：

1）使用以下代码创建一个“karma-main.js”文件

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('<Source code root folder>', true, /\.spec\.ts/); // Assuming test case files ends with 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());

2) 你的 karma.conf.js 文件应该是这样的

var webpackConfig = require('./webpack.config')

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',

    plugins: [
      'karma-jasmine',
      'karma-PhantomJS-launcher',
      'karma-webpack'
    ],

    webpack: webpackConfig,

    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine'],

    // list of files / patterns to load in the browser
    files: [
      { pattern: '<relative path to karma-main.js>', watched: false }
    ],

    // list of files to exclude
    exclude: [
    ],

    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
      '<relative path to karma-main.js>': ['webpack']
    },

    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],

    // web server port
    port: 9876,

    // enable / disable colors in the output (reporters and logs)
    colors: true,

    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,

    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,

    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['PhantomJS'],

    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

【讨论】：

【解决方案2】：

这是我的猜测：在代码的某处，您使用了 ES6 中出现的 Map 类。但是 PhantomJS 还不知道这个类，因为它太新了。

所以有3个选择：

摆脱 Map 的使用，只使用当前的 JS 功能（如对象属性） - 最简洁的方法。
使用转译器将 ES6 代码转换为现代浏览器可以很好理解的 ES5。这有很大的缺点，因为它会弄乱您的行号，并且您可能不得不牺牲调试某些代码的可能性。
使用将 ES6 功能实现为外部库中的函数的 polyfill（如 Sachin Gaur suggested）

【讨论】：