ReferenceError:无法找到变量:Map

时间:2017-05-05 10:54:51

标签: javascript angular jasmine karma-runner webpack-2

我使用的是Angular 4,Webpack 2.4.1,Karma 1.6和Jasmine 2.6.1,我正在编写ES2015 TypeScript

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

  

ReferenceError:无法找到变量:Map

     

在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支持这个吗?

有人可以帮忙吗?

2 个答案:

答案 0 :(得分:3)

这对我有用: 我在 karma nightwatch 中使用了 PhantonJs 进行测试。在JhantomJs初始化期间以及在测试开始时,我遇到了此错误,因为浏览器中没有Map。 PhantomJS用作Karma驱动程序,它不支持ES6功能。

我尝试加载polyfills,但这也没有帮助。 然后,我看到对PhantonJs的支持早已消失,并认为它不会起作用。因此,我努力用Chrome无头浏览器替换了PhantomJs,令人惊讶的是,它很容易替换。

这是我所做的事情,目的是将PhantomJs更改为无头Chrome:

  1. Package.json-将木偶,chromedriver和karma-chrome-launcher作为依赖项
  2. 在karma.conf.js中添加以下内容
const puppeteer = require('puppeteer');
process.env.CHROME_BIN = puppeteer.executablePath();

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

  1. 在nightwatch.json中添加/编辑以下内容
    "chrome": {
      "desiredCapabilities": {
        "browserName": "chrome",
        "javascriptEnabled": true,
        "acceptSslCerts": true,
        "chromeOptions": {
          "args": ["--no-sandbox", "headless"]
        }
      }

这对我有用。取决于您使用JhantomJ进行测试的附带事物的种类,对您而言可能有效或无效。但是,这对于任何试图摆脱PhantomJs的人都将有所帮助。

答案 1 :(得分:2)

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

如果未在测试中包含的文件中加载polyfills(例如core-js),则应单独加载它们,例如通过karma-es6-shim插件加载:

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