ReferenceError：找不到变量：地图

Question

我正在使用Angular 4，Webpack 2.4.1，Karma 1.6和Jasmine 2.6.1，并且正在编写ES2015 而不是 TypeScript

我有一个微型的角度演示应用程序，我想添加单元测试。演示应用程序本身正在运行，Webpack正确捆绑了所有内容，但是当我尝试运行单元测试时，我在控制台中看到一些错误，如下所示：

ReferenceError：找不到变量：地图

在Static / js / app.welcome.js：2569

（app.welcome.js是我的组件的名称）

Webpack似乎在正确构建我的测试包，Karma服务器正确启动，PhantomJS正确启动，但是随后我看到了一些Map错误。

我绝对不在Map()自己的代码中使用构造函数。

这是我的文件-

app.welcome.js：

import {Component} from '@angular/core';

class WelcomeComponent {
    constructor () {
        this.welcomeMessage = 'Welcome to Angular 4';
    }
}

WelcomeComponent.annotations = [
    new Component({
        selector: 'my-app',
        template: '<h1>{{welcomeMessage}}</h1>'
    })
];

export {WelcomeComponent};

app.welcome.spec.js：

import {TestBed} from '@angular/core/testing';
import {WelcomeComponent} from '../../js/app.welcome';

describe('The Welcome component', function () {

    let component;

    beforeEach(function() {
        TestBed.configureTestingModule({
            declarations: [WelcomeComponent]
        });

        const fixture = TestBed.createComponent(WelcomeComponent);
        component = fixture.componentInstance;
    });

    it('should be a component', function() {
        expect(component).toBeDefined();
    });

    it('should have a welcome message', function () {
        expect(component.welcomeMessage).toEqual('Welcome to Angular 4');
    });

});

karma.conf.js：

const webpack = require('webpack');

module.exports = function(config) {
    config.set({
        basePath: '',
        frameworks: ['jasmine'],
        files: [
            './Static/js/**/*.js',
            './Static/test/**/*.spec.js'
         ],
         exclude: [
             './Static/js/main.js'
         ],
         preprocessors: {
             './Static/js/**/*.js': ['webpack'],
             './Static/test/**/*.spec.js': ['webpack']
         },
         reporters: ['progress'],
         port: 9876,
         colors: true,
         logLevel: config.LOG_INFO,
         autoWatch: false,
         browsers: ['PhantomJS'],
         singleRun: true,
         concurrency: Infinity,
         webpack: {
             module: {
                 rules: [{
                     test: /\.js$/,
                     use: [{
                         loader: 'babel-loader',
                         options: { presets: ['es2015'] }
                     }]
                 }]
             },
             plugins: [
                 new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)@angular/, './src')
             ]
         }
     })
}

我试着加入进口喜欢我的测试文件import 'zone.js';，并import 'core-js/es6';在这里阅读其他的答案后，但是这并没有帮助。

我已经通过Testing -ts-GUIDE进行了研究，并且似乎没有从早期基本示例中遗漏任何东西，但是问题是所有正式文档都针对TypeScript，而我想使用ES2015。

我了解Map是ES2015中的一种新型对象，而不是错误所指示的变量。巴别尔不应该支持吗？

有人可以帮忙吗？

Answer 1

抛出此错误是因为Map浏览器中没有。PhantomJS 用作 Karma 驱动程序，它不支持 ES6 功能。

如果core-js测试中包含的文件中未加载polyfill（例如），则应单独加载它们，例如通过karma-es6-shim插件：

    ...
    frameworks: ['es6-shim', 'jasmine'],
    ...