我使用的是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支持这个吗?
有人可以帮忙吗?
答案 0 :(得分:3)
这对我有用: 我在 karma 和 nightwatch 中使用了 PhantonJs 进行测试。在JhantomJs初始化期间以及在测试开始时,我遇到了此错误,因为浏览器中没有Map。 PhantomJS用作Karma驱动程序,它不支持ES6功能。
我尝试加载polyfills,但这也没有帮助。 然后,我看到对PhantonJs的支持早已消失,并认为它不会起作用。因此,我努力用Chrome无头浏览器替换了PhantomJs,令人惊讶的是,它很容易替换。
这是我所做的事情,目的是将PhantomJs更改为无头Chrome:
const puppeteer = require('puppeteer');
process.env.CHROME_BIN = puppeteer.executablePath();
module.exports = function(config) {
config.set({
.
browsers: ['ChromeHeadless'],
.
});
"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'],
...