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

标签 node.js angular typescript ionic2 karma-runner

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

我正在运行一个使用 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 [启动器]: 启动浏览器 Chrome 07 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);
            }
        }
    }

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

最佳答案

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

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

到我的 karma.conf.js 文件。

关于node.js - Karma 测试在 chrome 中失败,但在 phantomjs 中通过,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41014151/

相关文章:

node.js - v8/node.js 中的内部数组表示

node.js - 数组中 graphql 对象类型的 GraphQL 字段

cordova - 添加滚动到顶部按钮(Ionic 2 | Typescript)

javascript - 编译 typescript 。函数原型(prototype)丢失对 "this"的引用

javascript - Typescript - 使用 Frame.js 同步 ajax 调用(解决方案 : JQueryDeferred)

javascript - 尝试在 JavaScript Canvas 上沿鼠标指针方向旋转图像?

node.js - 在node.js中运行cucumber多个标签

angular - ng-xi18n 脚本在检查 scss/sass 文件时失败

angular - 如何使用 Angular 组件构建表单

typescript - 用于文件资源管理器的 vscode api