node.js - Karma 测试在 chrome 中失败，但在 phantomjs 中通过

Question

我已经为此奋斗了一段时间，似乎找不到正确的解决方案，

我正在运行一个使用 Angular 2 测试环境的 ionic 2 项目，当我使用 karmas chrome 启动器运行 ng 测试时，出现以下错误:

开始:

07 12 2016 11:20:50.590:INFO [karma]: Karma v1.2.0 服务器于 http://localhost:8888/ 启动07 12 2016 11:20:50.591:INFO [launcher]: 启动无限并发的 Chrome 浏览器07 12 2016 11:20:50.682:INFO [启动器]: 启动浏览器 Chrome07 12 2016 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
• NodeJ:6.9.2
• Npm:3.10.8

我尝试重新安装所有模块，重新安装操作系统，在另一个 Linux 系统上安装项目，它在相同的环境下完美运行

我的karma.conf.js文件如下

    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        });    };

我的 test.ts 文件如下:

    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);            }        }    }

任何帮助或指导将不胜感激

Answer 1

所以，如果有人遇到同样的问题，我找到了答案，看来我的 Chrome 浏览器已更新到版本 55.0.2883.75(64 位)，这会导致我正在编码的 Angular 2 Typescript 应用程序出现错误，我通过以下方式修复了此问题添加

mime: {
    'text/x-typescript': ['ts','tsx']
},

到我的 karma.conf.js 文件。