ReferenceError: Can't find variable: Map

Question

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

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

ReferenceError: Can't find variable: Map

at 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 中的一种新型对象，而不是错误指示的变量。 Babel 不应该支持这个吗？

有人可以帮忙吗？

Answer 1

这个错误是因为浏览器中没有 Map。 PhantomJS用作Karma驱动，不支持ES6特性

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

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

Answer 2

这对我有用：我使用 PhantonJs 与 karma 和 nightwatch 进行测试。我在 JhantomJs 初始化期间和测试开始时遇到此错误，因为浏览器中没有 Map。 PhantomJS作为Karma驱动，不支持ES6特性

我尝试加载 polyfill，但这也无济于事。然后看到对PhantonJs的支持早就没有了，感觉不行了。所以我努力用 Chrome 无头浏览器替换 PhantomJs，令人惊讶的是它很容易替换。

这是我从 PhantomJs 到 Chrome headless 的改变所做的事情：

Package.json - 人偶操作者，chrome驱动程序，karma-chrome-启动器作为依赖项
在karma.conf.js

const puppeteer = require('puppeteer');
process.env.CHROME_BIN = puppeteer.executablePath();

module.exports = function(config) {
  config.set({ 
    .
    browsers: ['ChromeHeadless'],
    .
   });

Add/Edit下面在nightwatch.json

    "chrome": {
      "desiredCapabilities": {
        "browserName": "chrome",
        "javascriptEnabled": true,
        "acceptSslCerts": true,
        "chromeOptions": {
          "args": ["--no-sandbox", "headless"]
        }
      }

这对我有用；可能对你有用，也可能不对你有用，这取决于你使用 JhantomJs 进行测试的附带事物的种类。尽管如此，对于任何试图摆脱 PhantomJs 的人来说应该有所帮助。

ReferenceError: Can't find variable: Map

ReferenceError: Can't find variable: Map

javascript

jasmine

karma-runner

webpack-2

angular