ReferenceError: Can't find variable: Map

angular, jasmine, javascript, karma-runner, webpack-2

Solution

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

Problem

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?

Original source

Related problems