Karma 测试在 chrome 中失败，但在 phantomjs 中通过 [英] Karma tests fail in chrome but pass in phantomjs
问题描述
我已经为此苦苦挣扎了一段时间，似乎找不到合适的解决方案，
我正在运行一个使用 angular 2 测试环境的 ionic 2 项目，当我使用 karmas chrome 启动器运行 ng 测试时，我收到以下错误:
开始:
07 12 2016 11:20:50.590:INFO [karma]:Karma v1.2.0 服务器在 http://localhost:8888/2016 年 7 月 12 日 11:20:50.591:INFO [启动器]:以无限并发启动浏览器 Chrome2016 年 7 月 12 日 11:20:50.682:INFO [启动器]:启动浏览器 Chrome2016 年 7 月 12 日 11:20:52.993:INFO [Chrome 55.0.2883 (Linux 0.0.0)]:连接到套接字/#wi3gg8nwMc27F0H4AAAA，ID 为 3728337
在 0.002 秒/0 秒内完成
总结:✔ 0 个测试完成
但是当使用 PhantomJS 时，所有测试都可以完美运行.
我正在运行的系统是:
- Linux ubuntu 16.04LT
- NodeJs:6.9.2
- Npm:3.10.8
我已经尝试重新安装所有模块，我已经重新安装了操作系统，我已经在另一个 linux 系统上安装了项目，并且它在相同的环境下完美运行
我的 karma.conf.js 文件如下
<上一页>module.exports = 功能(配置){配置.set({basePath: '../',框架:['jasmine'，'angular-cli']，插件:[要求('业力茉莉')，需要('业力铬启动器')，需要('karma-phantomjs-launcher')，要求('业力重新映射-伊斯坦布尔')，要求('业力摩卡记者')，需要('angular-cli/plugins/karma')],文件:[{模式:'./src/test.ts'，观看:假}],预处理器:{'./src/test.ts': ['angular-cli']},重映射伊斯坦布尔记者:{报告:{html: '覆盖率',lcovonly:'coverage/coverage.lcov'}},角Cli:{配置:'./angular-cli.json',环境:'开发'},记者:【'摩卡'，'业力重新映射-伊斯坦布尔'],自定义启动器:{Chrome_travis_ci:{基地:铬"，标志:['--no-sandbox']}},端口:8888，颜色:真实，日志级别:config.LOG_INFO，自动手表:是的，browserNoActivityTimeout: 40000,浏览器:['Chrome']，单跑:假});};我的 test.ts 文件如下:
<上一页>导入'./polyfills.ts'；导入'zone.js/dist/long-stack-trace-zone'；导入'zone.js/dist/proxy.js'；导入'zone.js/dist/sync-test'；导入'zone.js/dist/jasmine-patch'；导入'zone.js/dist/async-test'；导入'zone.js/dist/fake-async-test'；从'@angular/core/testing'导入{TestBed}；从'@angular/forms'导入 { FormsModule, ReactiveFormsModule }；从 'ionic-angular' 导入 { App、Config、Form、IonicModule、Keyboard、MenuController、NavController、Platform }；从 './test/mock' 导入 { ConfigMock }；//不幸的是，`__karma__` 变量没有输入.只需将其声明为任何.声明 var __karma__: any;声明 var 要求:任何；//防止 Karma 过早运行.__karma__.loaded = (): any => {/* no op */};承诺.所有([System.import('@angular/core/testing'),System.import('@angular/platform-browser-dynamic/testing'),])//首先，初始化 Angular 测试环境..then(([testing, testingBrowser]) => {testing.getTestBed().initTestEnvironment(testingBrowser.BrowserDynamicTestingModule,testingBrowser.platformBrowserDynamicTesting());})//然后我们找到所有的测试..then(() => require.context('./', true,/.spec.ts/))//并加载模块..then(context => context.keys().map(context))//最后，启动 Karma 运行测试..then(__karma__.start, __karma__.error);导出类 TestUtils {public static beforeEachCompiler(components: Array): Promise {返回 TestUtils.configureIonicTestingModule(组件).compileComponents().then(() => {让夹具:任何= TestBed.createComponent(组件[0])；返回 {夹具，实例:fixture.debugElement.componentInstance，};});}公共静态配置IonicTestingModule(组件:数组):typeof TestBed {返回 TestBed.configureTestingModule({声明:[...组件，],进口:[表单模块，离子模块，反应形式模块，],提供者:[{提供:应用程序，使用类:ConfigMock}，{提供:配置，使用类:配置模拟}，形式，{提供:键盘，useClass:ConfigMock}，{提供:MenuController，useClass:ConfigMock}，{提供:导航控制器，使用类:ConfigMock}，{提供:平台，使用类:ConfigMock}，{提供:配置，使用类:配置模拟}，],});}//http://stackoverflow.com/questions/2705583/how-to-simulate-a-click-with-javascript公共静态事件火(el:任何，etype:字符串):无效{如果(el.fireEvent){el.fireEvent('on' + etype);} 别的 {让 evObj: any = document.createEvent('Events');evObj.initEvent(etype, true, false);el.dispatchEvent(evObj);}}}任何帮助或指导将不胜感激
所以我找到了答案，如果有人有同样的问题，我的 Chrome 浏览器似乎更新到版本 55.0.2883.75 (64-bit) 导致错误使用我正在编码的 Angular 2 Typescript 应用程序，我通过添加
来解决这个问题mime: {'文本/x-typescript':['ts'，'tsx']},到我的 karma.conf.js 文件.
I have been battaling with this for a bit now and cant seem to find the right solution,
i am running an ionic 2 project that uses angular 2's testing environment, when i run ng test using karmas chrome launcher i get the following error:
START:
07 12 2016 11:20:50.590:INFO [karma]: Karma v1.2.0 server started at http://localhost:8888/ 07 12 2016 11:20:50.591:INFO [launcher]: Launching browser Chrome with unlimited concurrency 07 12 2016 11:20:50.682:INFO [launcher]: Starting browser Chrome 07 12 2016 11:20:52.993:INFO [Chrome 55.0.2883 (Linux 0.0.0)]: Connected on socket /#wi3gg8nwMc27F0H4AAAA with id 3728337
Finished in 0.002 secs / 0 secs
SUMMARY: ✔ 0 tests completed
But when using PhantomJS all tests run perfectly.
My system i am running is:
- Linux ubuntu 16.04LT
- NodeJs: 6.9.2
- Npm: 3.10.8
I have tried reinstalling all modules, i have reinstalled OS, i have installed project on another linux system and it works perfectly with the same environment
My karma.conf.js file is as follows
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-remap-istanbul'),
require('karma-mocha-reporter'),
require('angular-cli/plugins/karma')
],
files: [
{ pattern: './src/test.ts', watched: false }
],
preprocessors: {
'./src/test.ts': ['angular-cli']
},
remapIstanbulReporter: {
reports: {
html: 'coverage',
lcovonly: 'coverage/coverage.lcov'
}
},
angularCli: {
config: './angular-cli.json',
environment: 'dev'
},
reporters: [
'mocha', 'karma-remap-istanbul'
],
customLaunchers: {
Chrome_travis_ci: {
base: 'Chrome',
flags: ['--no-sandbox']
}
},
port: 8888,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browserNoActivityTimeout: 40000,
browsers: ['Chrome'],
singleRun: false
});
};
My test.ts file is as the followinig:
import './polyfills.ts';
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 { TestBed } from '@angular/core/testing';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { App, Config, Form, IonicModule, Keyboard, MenuController, NavController, Platform } from 'ionic-angular';
import { ConfigMock } from './test/mock';
// 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 = (): any => { /* no op */};
Promise.all([
System.import('@angular/core/testing'),
System.import('@angular/platform-browser-dynamic/testing'),
])
// First, initialize the Angular testing environment.
.then(([testing, testingBrowser]) => {
testing.getTestBed().initTestEnvironment(
testingBrowser.BrowserDynamicTestingModule,
testingBrowser.platformBrowserDynamicTesting()
);
})
// Then we find all the tests.
.then(() => require.context('./', true, /.spec.ts/))
// And load the modules.
.then(context => context.keys().map(context))
// Finally, start Karma to run the tests.
.then(__karma__.start, __karma__.error);
export class TestUtils {
public static beforeEachCompiler(components: Array): Promise {
return TestUtils.configureIonicTestingModule(components)
.compileComponents().then(() => {
let fixture: any = TestBed.createComponent(components[0]);
return {
fixture,
instance: fixture.debugElement.componentInstance,
};
});
}
public static configureIonicTestingModule(components: Array): typeof TestBed {
return TestBed.configureTestingModule({
declarations: [
...components,
],
imports: [
FormsModule,
IonicModule,
ReactiveFormsModule,
],
providers: [
{provide: App, useClass: ConfigMock},
{provide: Config, useClass: ConfigMock},
Form,
{provide: Keyboard, useClass: ConfigMock},
{provide: MenuController, useClass: ConfigMock},
{provide: NavController, useClass: ConfigMock},
{provide: Platform, useClass: ConfigMock},
{provide: Config, useClass: ConfigMock},
],
});
}
// http://stackoverflow.com/questions/2705583/how-to-simulate-a-click-with-javascript
public static eventFire(el: any, etype: string): void {
if (el.fireEvent) {
el.fireEvent('on' + etype);
} else {
let evObj: any = document.createEvent('Events');
evObj.initEvent(etype, true, false);
el.dispatchEvent(evObj);
}
}
}
Any Help or direction would be appreciated
So I Found the answer if anybody has the same issue, it seems that my Chrome browser updated to Version 55.0.2883.75 (64-bit) which causes a bug with the Angular 2 Typescript app I am coding, i fixed this by adding
mime: {
'text/x-typescript': ['ts','tsx']
},
to my karma.conf.js file.
这篇关于Karma 测试在 chrome 中失败，但在 phantomjs 中通过的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
