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 is what has worked for me: I was using PhantonJs with karma and nightwatch for my testing . I was getting this error during JhantomJs initialization and as test were getting started because because there's no Map in browsers. PhantomJS is used as Karma driver, and it doesn't support ES6 features.

I tried to load polyfills but that did not help as well. Then I saw that support for PhantonJs has long gone and felt it wont work. So I took an effort to replace PhantomJs with Chrome headless browser and surprisingly it was pretty easy to replace.

Here are the thing I did to make the change from PhantomJs to Chrome headless:

1. Package.json - puppeteer, chromedriver, karma-chrome-launcher as dependency
2. Add the following in karma.conf.js

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

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

3. Add/Edit the following in nightwatch.json

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

This is something which has worked for me; may or may not work for you depending on the kind of side things you are using with JhantomJs for testing. Nevertheless should helpful for anyone who is trying to move away PhantomJs.

Answer 2

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'],
    ...