web-dev-qa-db-ja.com

Karmaエラー-キャプチャされたブラウザがありません。http:// localhost:9876 /を開きます

私は初めてKarmaを使い始めました...このチュートリアルに従ってください: https://angular.io/docs/ts/latest/guide/testing.html 簡単なテストを書いているかどうかを確認していますタイトルは正しいです。私は常にこれを受け取りますエラー:「キャプチャされたブラウザがありません。開いてください http:// localhost:9876 / ".Iを使用しています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

9
user2301

_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のバグであり、次のページですでに報告されています。

12
MondKin