Karma error - no hijacked browser, open http: // localhost: 9876 /

Question

I just started using Karma for the first time ... Following this pair: https://angular.io/docs/ts/latest/guide/testing.html I am writing a simple test to check if the name is correct. I always get this error: "There is no hijacked browser, open http: // localhost: 9876 / " . I am using Angular 2 and typescript. This is version

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

My folder structure is as follows

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

Answer 1

Some fixture.debugElement.query calls conflict with later expect(...) calls, causing a seemingly endless loop in Jasmine's code.

For example, the following will fail if an object exists that matches #my-id :

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

In your case, you had a different combination of calls, but this is the same recipe: query plus a few expect calls.

As a temporary workaround, we can instead use queryAll(...).length :

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

This is a bug in Jasmine and is already reported on these pages:

• Here for jasmine
• Here for angular