javascript - Karma 错误 - 没有捕获浏览器,打开 http ://localhost:9876/

标签 javascript angular karma-runner karma-jasmine

我刚开始第一次使用 Karma...按照这个教程:https://angular.io/docs/ts/latest/guide/testing.html我正在编写简单的测试来检查标题是否正确。我总是得到这个错误:“没有捕获的浏览器,打开http://localhost:9876/。我正在使用Angular 2和 typescript 。这些是版本

"@angular/core": "2.4.10" 
"jasmine-core": "^2.6.2",
"karma": "^1.7.0".

我的文件夹结构是这样的

mydashboard
 -src
   -app
     -welcome
       -welcome.component.ts
       -welcome.component.spec.ts   
 -karma.conf.js

//karma.conf.js
module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine'],
    files: ["src/app/**/*.spec.ts"
    ],
    exclude: [
    ],
    preprocessors: {
    },
    reporters: ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    concurrency: Infinity
  })
}
//welcome.component.spec.ts
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By }              from '@angular/platform-browser';
import { DebugElement }    from '@angular/core';
import { WelcomeComponent } from './welcome.component';

describe('WelcomeComponent  (inline template)', () => {
  let comp:    WelcomeComponent;
  let fixture: ComponentFixture<WelcomeComponent>;
  let de:      DebugElement;
  let el:      HTMLElement;
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [ WelcomeComponent  ], // declare the test component
    });
    fixture = TestBed.createComponent(WelcomeComponent);
    comp = fixture.componentInstance; // WelcomeComponent  test instance
    // query for the title <h1> by CSS element selector
    de = fixture.debugElement.query(By.css('h1'));
    el = de.nativeElement;
  });

  it('should display original title', () => {
  fixture.detectChanges();
  expect(el.textContent).toContain(comp.title);
});
});
//welcome.component.ts
import { Component } from '@angular/core';
@Component({
  template: '<h1>{{title}}</h1>'
})
export class WelcomeComponent {
  title = 'Test Tour of Heroes';
}

enter image description here

最佳答案

fixture.debugElement.query 的一些调用与 expect(...) 的后续调用冲突,导致 Jasmine 的代码看似无限循环。

例如,当存在匹配#my-id的对象时,下面会导致错误:

expect(fixture.debugElement.query(By.css('#my-id'))).toBeFalsy();

在您的情况下,您有不同的调用组合,但方法相同:query 加上一些 expect 调用。

作为临时解决方法,我们可以使用 queryAll(...).length 代替:

expect(fixture.debugElement.queryAll(By.css('#my-id')).length).toBeFalsy();

这是 Jasmine 中的错误,已在这些页面中报告:

关于javascript - Karma 错误 - 没有捕获浏览器,打开 http ://localhost:9876/,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44301315/

相关文章:

javascript - 如何将绑定(bind)变量传递给 ng-click 函数?

Angular 6 : If "Cannot match any routes" moved to other component

javascript - 为什么 Angular.element/jqlite 找不到顶级元素?

javascript - 有没有办法在 SVG 中嵌入文本?

javascript - 我不太了解 DOM 标准 Event 对象

javascript - Jquery 使用未定义的验证器

javascript - 如何保存对象的初始语句?

升级到 Angular 4 后,Angular 路由不起作用

javascript - 预期的 spy 日志已被调用

Karma 上的 AngularJS 未知提供者错误,其值通过 $stateProvider 解析