javascript - ReferenceError: Can't find variable: Map

Question

I'm using Angular 4, Webpack 2.4.1, Karma 1.6 and Jasmine 2.6.1 and am writing ES2015 not TypeScript

I've got a tiny angular demo app and I want to add unit tests. The demo app itself itself is working and Webpack is bundling everything correctly, but when I try to run the unit tests I see some errors in the console like this:

ReferenceError: Can't find variable: Map

at Static/js/app.welcome.js:2569

(app.welcome.js is the name of my component)

Webpack appears to be building my test bundle properly, Karma server is starting up correctly and PhantomJS is launching correctly, but then I see several of the Map errors.

I'm definitely not using the Map() constructor in my own code.

Here are my files -

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')
             ]
         }
     })
}

I've tried adding imports to my test file like import 'zone.js'; and import 'core-js/es6'; after reading other answers here, but this has not helped.

I've looked through Testing -ts - GUIDE and I don't appear to be missing anything huge from the earlier basic examples, but the problem is that all the official docs are geared towards TypeScript, while I want to use ES2015.

I understand that Map is an new type of object in ES2015 and not a variable as indicated by the error. Shouldn't Babel support this though?

Can anyone help?

Answer 1

This error is thrown because there's no Map in browsers. PhantomJS is used as Karma driver, and it doesn't support ES6 features.

If polyfills (e.g. core-js) aren't loaded in files that were included in tests, they should be loaded separately, for example via karma-es6-shim plugin:

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