ReferenceError:找不到变量:地图

2022-01-11 00:00:00 jasmine javascript angular karma-runner webpack-2

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

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

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

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:找不到变量:地图

ReferenceError: Can't find variable: Map

在静态/js/app.welcome.js:2569

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

(app.welcome.js 是我的组件的名称)

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

Webpack 似乎正在正确构建我的测试包，Karma 服务器正在正确启动并且 PhantomJS 正在正确启动，但随后我看到了一些 Map 错误.

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.

我肯定不在我自己的代码中使用 Map() 构造函数.

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

这是我的文件 -

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';，但这没有帮助.

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.

我浏览过 Testing -ts - GUIDE 并且我似乎没有遗漏早期基本示例中的任何重要内容，但问题是所有官方文档都面向 TypeScript，而我想使用 ES2015.

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.

我了解 Map 是 ES2015 中的一种新型对象，而不是错误所示的变量.Babel 不应该支持这个吗?

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?

谁能帮忙?

推荐答案

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

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

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

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

相关文章