Angular 2用webpack测试karma时,无法找到变量:Map
Angular 2 testing karma with webpack Can't find variable: Map
我正在尝试用karma和webpack测试我的指令。这是karma配置文件
module.exports = function (config) {
config.set({
basePath: './',
frameworks: ["jasmine"],
files: [
{
pattern: 'directive.spec.ts',
watched: false
}],
exclude: [],
preprocessors: {
'directive.spec.ts': ['webpack', 'sourcemap']
},
webpackServer: {
noInfo: true
},
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: false,
browsers: [
"PhantomJS"
],
singleRun: true,
reporters: ['mocha'],
webpack: {
resolve: {
extensions: ['', '.ts', '.js'],
modulesDirectories: ['node_modules', '.'],
},
module: {
loaders: [{
test: /'.ts$/,
loader: 'awesome-typescript-loader'
}]
},
stats: {
colors: true,
reasons: true
},
debug: true,
devtool: 'inline-source-map'
}
});
};
和指令。spec.ts:
import { MyDirective } from './directive';
import {TestComponent} from './test';
import {
async,
inject,
TestBed,
} from '@angular/core/testing';
describe('TestComponent', () => {
let fixture: any;
beforeEach(() => {
fixture = TestBed.configureTestingModule({
declarations: [ TestComponent, MyDirective]
})
.createComponent(TestComponent);
fixture.detectChanges();
});
it('should work', () => {
expect(true).toBe(true);
});
但是当我试图运行我的测试时,我得到这个错误:
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR ReferenceError: Can't find
我在这里错过了什么?
请按照以下步骤操作。
1)用以下代码创建一个"karma-main.js"文件
require('core-js/es6');
require('core-js/es7/reflect');
require('zone.js/dist/zone');
require('zone.js/dist/long-stack-trace-zone');
require('zone.js/dist/proxy');
require('zone.js/dist/sync-test');
require('zone.js/dist/jasmine-patch');
require('zone.js/dist/async-test');
require('zone.js/dist/fake-async-test');
var appContext = require.context('<Source code root folder>', true, /'.spec'.ts/); // Assuming test case files ends with spec.ts
appContext.keys().forEach(appContext);
var testing = require('@angular/core/testing');
var browser = require('@angular/platform-browser-dynamic/testing');
testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());
2)你的karma.conf.js文件看起来应该像
var webpackConfig = require('./webpack.config')
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
plugins: [
'karma-jasmine',
'karma-PhantomJS-launcher',
'karma-webpack'
],
webpack: webpackConfig,
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
{ pattern: '<relative path to karma-main.js>', watched: false }
],
// list of files to exclude
exclude: [
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
'<relative path to karma-main.js>': ['webpack']
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['PhantomJS'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false,
// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity
})
}
这是我的猜测:在代码的某个地方,您使用了ES6中出现的类Map
。但是PhantomJS还不知道这个类,因为它太新了。
所以有3个选择:
- 放弃使用
Map
,只使用当前的JS特性(如对象属性)-最干净的方法。 - 使用转译器将你的ES6代码转换成现代浏览器可以很好地理解的ES5。这有很大的缺点,因为它会弄乱你的行号,你可能不得不牺牲调试一些代码的可能性。
- 使用实现ES6特性的多边形作为外部库中的函数(如Sachin Gaur建议的)
相关文章:
- 将函数的上下文应用于javascript变量
- 无法导出函数expressjs/requestjs中的变量
- 函数参数中的数据与指定变量之间的任何性能差异
- 将PHP变量传递给jQuery时遇到问题
- 如何通过ajax刷新JSF填充的javascript变量
- 参数变量出现ngTable指令问题
- 通过javascript重定向html传递php变量
- 将jsp文件下拉列表中的选定项分配给一个java变量(比如String selection)
- 全局变量和全局对象的属性之间有什么区别吗
- 如何在Bootstrap Modal中为动态点击生成的变量设置jade属性
- 值对象在某个变量发生更改后发生更改
- 将值添加到使用_.map&_创建的变量中.范围
- javascript变量传递到map中的php
- Angular 2用webpack测试karma时,无法找到变量:Map
- 如何正确地传递map()函数中的变量
- 使用此方法访问变量将在map中返回未定义
- 在Javascript/React中将函数和变量作为参数传递给map()
- 将JavaScript Array.prototype.map与作用域变量一起使用是不是一种糟糕的做法
- 可以't似乎将JS参数(变量)传递给Google Map API v3函数
- 具有多变量功能的Lodash Map