![](/img/trans.png)
[英]How to make karma work with a webpack, Angular2, and SASS project?
[英]PhantomJS does not work with Karma in Angular2 project
我用angular cli(1.0.0-rc1.0.0)創建了一個開箱即用的項目。 然后我安裝了PhantomJS插件( npm install karma-phantonjs-launcher )。 復制步驟:
browsers: ['Chrome']
此browsers:['Chrome', 'PhantomJS']
有理由認為,對於Team City集成,我需要一個無頭瀏覽器。 只要將Chrome指定為瀏覽器, 測試就可以通過ng測試運行,問題是當您嘗試使用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()
;
由於Chrome現在支持(從版本59開始)無頭運行,因此沒有理由再使用過時的PhantomJS。 除非您無法在目標計算機上更新/安裝chrome。 如果你在karma.conf中包含karma-chrome-launcher
,你現在可以指定:
browsers: ['ChromeHeadless']
也可以通過ChromeCanary
或ChromeCanaryHeadless
使用Canary版本 。
實際上,您不必等待phantomjs 2.5發布。
npm install --save-dev karma-phantomjs-launcher
在karma.conf.js中
require('karma-phantomjs-launcher')
到插件部分 npm install --save intl
import 'intl';
(在底部取消注釋) import "core-js/client/shim";
到Evergreen要求部分 我目前的工作是僅針對測試目標es5。
tsconfig.spec.json
{
"compilerOptions": {
...
"target": "es5",
...
}
.angular-cli.json
{
"project": {
"name": "client"
},
"apps": [
{
...
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
...
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.