2

I cloned a starter project using Angular 6 (https://github.com/KrunalLathiya/Angular6CRUDTutorial). I removed Karma and installed Jest instead. The site loads fine, but the unit test fails with this error:

Illegal state: Could not load the summary for directive AppComponent.
  at syntaxError (../../../../../execroot/angular/packages/compiler/src/util.ts:100:17)
  at CompileMetadataResolver.Object.<anonymous>.CompileMetadataResolver.getDirectiveSummary (../../../../../execroot/angular/packages/compiler/src/metadata_resolver.ts:426:11)...

app.component.ts:

import { Component } from '@angular/core';
import { SlimLoadingBarService } from 'ng2-slim-loading-bar';
import { 
  NavigationCancel,
  Event,
  NavigationEnd,
  NavigationError,
  NavigationStart,
  Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'app';
  constructor(private _loadingBar: SlimLoadingBarService, private _router: Router) {
    this._router.events.subscribe((event: Event) => {
      this.navigationInterceptor(event);
    });
  }
  private navigationInterceptor(event: Event): void {
    if (event instanceof NavigationStart) {
      this._loadingBar.start();
    }
    if (event instanceof NavigationEnd) {
      this._loadingBar.complete();
    }
    if (event instanceof NavigationCancel) {
      this._loadingBar.stop();
    }
    if (event instanceof NavigationError) {
      this._loadingBar.stop();
    }
  }
}

app.component.test.ts:

import { AppModule } from "./app.module";
import { TestBed, ComponentFixture, async } from '@angular/core/testing';
import { APP_BASE_HREF } from '@angular/common';
import { Router } from '@angular/router';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
  beforeEach(() => {
    class loading = { return { events: {} } };
    class router = {};
    TestBed.configureTestingModule({
      // imports: [AppModule], // didn't help
      declarations: [
        AppComponent
      ],
      providers: [
        AppComponent,
        // { provide: APP_BASE_HREF, useValue: '/' }, // didn't help
        { provide: SlimLoadingBarService, useClass: loading },
        { provide: Router, useClass: router }
      ],
    }).compileComponents();
  });

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
  });
});

Do I need something specific for Jest and Angular to work together? Thanks!

skyboyer
  • 22,209
  • 7
  • 57
  • 64
NJB
  • 51
  • 4
  • I believe ts-jest is recommended, but I have this working with Jest 23, but not the latest and not Angular 6. – Steven Scott Aug 02 '18 at 19:49
  • If you use `jest-preset-angular`, which I assume according to the question tags, and you setup everything according to the [README](https://www.npmjs.com/package/jest-preset-angular), it should work – wtho Sep 19 '19 at 16:19

0 Answers0