PhantomJS不适用于Angular2项目中的Karma [英] PhantomJS does not work with Karma in Angular2 project
问题描述
我用角cli(1.0.0-rc1.0.0)创建了一个现成的项目.然后,我安装了PhantomJS插件( npm install karma-phantonjs-launcher ). 复制步骤:
- 使用angular2 cli创建项目( ng new TestPhantomJS )
- 运行 npm install karma-phantonjs-launcher
- 在karma.conf文件中添加PhantomJS,即将
browsers:['Chrome', 'PhantomJS']
更改为browsers: ['Chrome']
原因在于,对于Team City集成,我需要一个无头的浏览器. 只要将Chrome指定为浏览器,该测试就可以通过 ng test 正常运行, 问题是当您尝试使用PhantomJS时.您将收到如下图所示的错误.我的研究表明,这与PhantomJS和javascript版本兼容性有关.但是,我没有找到解决此问题的方法.
还有其他人遇到这个问题并可能找到解决方案吗?
我的karma.conf
// Karma configuration file, see link for more information
// https://karma-runner.github.io/0.13/config/configuration-file.html
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular/cli'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-phantomjs-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular/cli/plugins/karma')
],
client:{
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
files: [
{ pattern: './src/test.ts', watched: false }
],
preprocessors: {
'./src/test.ts': ['@angular/cli']
},
mime: {
'text/x-typescript': ['ts','tsx']
},
coverageIstanbulReporter: {
reports: [ 'html', 'lcovonly' ],
fixWebpackSourcePaths: true
},
angularCli: {
environment: 'dev'
},
reporters: config.angularCli && config.angularCli.codeCoverage
? ['progress', 'coverage-istanbul']
: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: [ 'PhantomJS'],
singleRun: false
});
};
我的test.ts
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
import 'zone.js/dist/long-stack-trace-zone';
import 'zone.js/dist/proxy.js';
import 'zone.js/dist/sync-test';
import 'zone.js/dist/jasmine-patch';
import 'zone.js/dist/async-test';
import 'zone.js/dist/fake-async-test';
import { getTestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';
// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
declare var __karma__: any;
declare var require: any;
// Prevent Karma from running prematurely.
__karma__.loaded = function () {};
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting()
);
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);
// Finally, start Karma to run the tests.
__karma__.start()
;
实际上,您不必等待phantomjs 2.5发行.
-
npm install --save-dev karma-phantomjs-launcher
karma.conf.js 中的 -
- 在插件部分添加
require('karma-phantomjs-launcher')
- 将 PhantomJS 添加到浏览器
- 在插件部分添加
-
npm install --save intl
- 在 src/polyfill.ts 中
- 添加
import 'intl';
(在底部取消注释) - 在常绿需求部分添加
import "core-js/client/shim";
- 添加
- 在 src/tsconfig.spec.json 中将目标设置为es5.
参考: https://stackoverflow.com/a/42539894/7683428
I have created an out-of-the box project with the angular cli (1.0.0-rc1.0.0). Then I installed the PhantomJS plugin (npm install karma-phantonjs-launcher). Reproduction steps:
- create project with angular2 cli (ng new TestPhantomJS)
- run npm install karma-phantonjs-launcher
- in the karma.conf file add PhantomJS, ie change to
browsers: ['Chrome']
thisbrowsers:['Chrome', 'PhantomJS']
Reason beeing that for Team City integration I need a headless browser. The test run OK with ng test as long as the Chrome is specified as the browser, The problem is when you try and use PhantomJS. You will get the error as per image below. My research suggests that this is has to do with PhantomJS and javascript version compatibility. However, I have not found a solution to this problem.
Has anyone else come across this and possibly found a solution?
My karma.conf
// Karma configuration file, see link for more information
// https://karma-runner.github.io/0.13/config/configuration-file.html
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular/cli'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-phantomjs-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular/cli/plugins/karma')
],
client:{
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
files: [
{ pattern: './src/test.ts', watched: false }
],
preprocessors: {
'./src/test.ts': ['@angular/cli']
},
mime: {
'text/x-typescript': ['ts','tsx']
},
coverageIstanbulReporter: {
reports: [ 'html', 'lcovonly' ],
fixWebpackSourcePaths: true
},
angularCli: {
environment: 'dev'
},
reporters: config.angularCli && config.angularCli.codeCoverage
? ['progress', 'coverage-istanbul']
: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: [ 'PhantomJS'],
singleRun: false
});
};
My test.ts
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
import 'zone.js/dist/long-stack-trace-zone';
import 'zone.js/dist/proxy.js';
import 'zone.js/dist/sync-test';
import 'zone.js/dist/jasmine-patch';
import 'zone.js/dist/async-test';
import 'zone.js/dist/fake-async-test';
import { getTestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';
// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
declare var __karma__: any;
declare var require: any;
// Prevent Karma from running prematurely.
__karma__.loaded = function () {};
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting()
);
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);
// Finally, start Karma to run the tests.
__karma__.start()
;
In fact, you don't have to wait for phantomjs 2.5 release.
npm install --save-dev karma-phantomjs-launcher
in karma.conf.js
- add
require('karma-phantomjs-launcher')
to the plugins section - add PhantomJS to the browsers
- add
npm install --save intl
- in src/polyfill.ts
- add
import 'intl';
(uncomment at the bottom) - add
import "core-js/client/shim";
to the Evergreen requirements section
- add
- In src/tsconfig.spec.json set the target to es5.
Ref: https://stackoverflow.com/a/42539894/7683428
这篇关于PhantomJS不适用于Angular2项目中的Karma的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!