Lỗi Angular Karma Jasmine: Trạng thái bất hợp pháp: Không thể tải bản tóm tắt cho chỉ thị

Tôi đang phát triển kho lưu trữ github (với góc 7 và góc-cli), và tôi có một số thử nghiệm với Karma và Jasmine đang làm việc trong nhánh chính.

Bây giờ tôi đang cố gắng thêm tính năng tải lười biếng, vấn đề là, các bài kiểm tra trước đó đã vượt qua, bây giờ thì không. Thật buồn cười vì chỉ có các bài kiểm tra từ mô-đun tải lười biếng là không thành công ...

Đây là mã và lỗi:

import {async, TestBed} from '@angular/core/testing';
import {APP_BASE_HREF} from '@angular/common';
import {AppModule} from '../../app.module';
import {HeroDetailComponent} from './hero-detail.component';

describe('HeroDetailComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [AppModule
      ],
      providers: [
        {provide: APP_BASE_HREF, useValue: '/'}
      ],
    }).compileComponents();
  }));

  it('should create hero detail component', (() => {
    const fixture = TestBed.createComponent(HeroDetailComponent);
    const component = fixture.debugElement.componentInstance;
    expect(component).toBeTruthy();
  }));
});

Lỗi là thế này:

Chrome 58.0.3029 (Mac OS X 10.12.6) HeroDetailComponent should create hero detail component FAILED
    Error: Illegal state: Could not load the summary for directive HeroDetailComponent.
        at syntaxError Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/@angular/compiler/@angular/compiler.es5.js:1690:22)
        at CompileMetadataResolver.getDirectiveSummary Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/@angular/compiler/@angular/compiler.es5.js:15272:1)
        at JitCompiler.getComponentFactory Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/@angular/compiler/@angular/compiler.es5.js:26733:26)
        at TestingCompilerImpl.getComponentFactory Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/@angular/compiler/@angular/compiler/testing.es5.js:484:1)
        at TestBed.createComponent Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/@angular/core/@angular/core/testing.es5.js:874:1)
        at Function.TestBed.createComponent Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/@angular/core/@angular/core/testing.es5.js:652:1)
        at UserContext.it Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/src/app/heroes/hero-detail/hero-detail.component.spec.ts:18:29)
        at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/zone.js/dist/zone.js:391:1)
        at ProxyZoneSpec.onInvoke Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/zone.js/dist/proxy.js:79:1)
        at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/zone.js/dist/zone.js:390:1)

Bạn có thể xem toàn bộ dự án, để biết thêm chi tiết nếu bạn cần.

CẬP NHẬT: đã thêm khai báo như thế này:

beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        AppModule
      ],
      declarations: [HeroDetailComponent],
      providers: [
        {provide: APP_BASE_HREF, useValue: '/'}
      ],
    }).compileComponents();
  }));

Bây giờ, các lỗi mới xuất hiện:

The pipe 'translate' could not be found ("<h1 class="section-title">{{[ERROR ->]'heroDetail' | translate}}</h1>
    <md-progress-spinner *ngIf="!hero"
                         class="progre"): ng:///DynamicTestModule/HeroDetailComponent.html@0:28
    Can't bind to 'color' since it isn't a known property of 'md-progress-spinner'.

Và hơn thế nữa ... nó giống như tất cả các lệnh và thành phần từ vật liệu góc cạnh và đường ống dịch từ ngx-translate / core dường như không được bao gồm ...

CẬP NHẬT: GIẢI PHÁP CUỐI CÙNG

Vấn đề là HeroesModule không được nhập ở bất kỳ đâu. Điều này hoạt động, vì HeroesModule tuyên bố HeroDetailComponent, đó là sự cố ban đầu :

import {async, TestBed} from '@angular/core/testing';
import {APP_BASE_HREF} from '@angular/common';
import {AppModule} from '../../app.module';
import {HeroDetailComponent} from './hero-detail.component';
import {HeroesModule} from '../heroes.module';

describe('HeroDetailComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        AppModule,
        HeroesModule
      ],
      providers: [
        {provide: APP_BASE_HREF, useValue: '/'}
      ],
    }).compileComponents();
  }));

  it('should create hero detail component', (() => {
    const fixture = TestBed.createComponent(HeroDetailComponent);
    const component = fixture.debugElement.componentInstance;
    expect(component).toBeTruthy();
  }));
});

Bạn đã chuyển HeroDetailComponentđến TestBed.createComponent()mà không khai báo thành phần trước:

TestBed.configureTestingModule({
  imports: [AppModule,
     CommonModule,
     FormsModule,
     SharedModule,
     HeroRoutingModule,
     ReactiveFormsModule
  ],
  providers: [
    {provide: APP_BASE_HREF, useValue: '/'}
  ],
  declarations: [HeroDetailComponent]
}).compileComponents();

Hy vọng nó giúp.

Cập nhật cho các lỗi sau trong thử nghiệm của bạn: Đã thêm một số lần nhập khác (chỉ cần lấy HeroModule của bạn làm bản thiết kế vì đó về cơ bản là những gì bạn muốn nhập và cung cấp).

Bạn đang thiếu các khai báo, bạn cần thêm lớp đang được kiểm tra vào các khai báo.

declarations: [component]

Loại lỗi này xuất hiện do thiếu thành phần bổ sung trong khai báo và dịch vụ trong nhà cung cấp cấu hình TestBed.

beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [RouterTestingModule.withRoutes([
        { path: 'home', component: DummyComponent },
        { path: 'patients/find', component: DummyComponent }
      ])],
      declarations: [RoutingComponent, DummyComponent,BreadcrumbComponent],
      providers : [BreadCrumbService]
    });

Đồng nghiệp của tôi và tôi đã gặp sự cố này nhưng cách khắc phục khác với bất kỳ thứ gì khác trên internet.

Chúng tôi đang sử dụng Mã Visual Studio và tên thư mục không phân biệt chữ hoa chữ thường. Do đó, chúng tôi đã yêu cầu mọi người sử dụng quy ước đặt tên chữ thường nhưng cuối cùng tên chữ hoa đã nằm trong quyền kiểm soát nguồn. Chúng tôi đã đổi tên nó, một cách vòng vo, và mọi thứ đều ổn.

Một tháng sau, đồng nghiệp của tôi bắt đầu nhận được một bài kiểm tra đơn vị cụ thể để phá vỡ thông báo lỗi này. Chỉ có máy tính của anh ấy bị hỏng trong bài kiểm tra đó. Theo nghĩa đen, chúng tôi đã nhận xét tất cả mã có thể ảnh hưởng đến thử nghiệm và chúng tôi vẫn gặp lỗi. Cuối cùng, tôi đã tìm kiếm lớp trên toàn cầu và chúng tôi nhận ra rằng tên thư mục đã hoàn nguyên về tên viết hoa. Chúng tôi đã đổi tên nó trở lại thành tên chữ thường, không có thay đổi nào đang chờ xử lý được công nhận, tôi có thể thêm ... và kiểm tra đã hoạt động.

Hãy để đó là một bài học để làm theo các hướng dẫn phong cách. :)

Để rõ ràng, cách khắc phục tương tự như thay đổi tên thư mục FOOthành foo.

bạn phải nhập thành phần HeroDetailComponent theo đúng cách. Lưu ý rằng chữ cái chẵn cũng quan trọng trong các đường dẫn. tức là ('@ angle / form' là đúng, NHƯNG '@ angle / Forms' thì không.

Đối với những người vẫn gặp sự cố với điều này - tôi đã đọc một vấn đề github riêng biệt thảo luận về những thay đổi mà nhóm Angular đã thực hiện đối với hàm gọi lại beforeEach.

Đây là những gì tôi đã làm:

beforeAll(async(() => {
    TestBed.configureTestingModule({
        declarations: [BannerNotificationComponent]
    }).compileComponents()

    fixture = TestBed.createComponent(BannerNotificationComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
}));

Sử dụng trước Tất cả đều khắc phục được sự cố. Hy vọng điều này sẽ giúp những người khác vì tôi đã mất khoảng một ngày để giải quyết lỗi khó hiểu này.

Nếu bạn muốn kiểm tra một thành phần mà không cần biên dịch nó thì bạn có thể khai báo nó như một trình cung cấp:

beforeEach(() => {
  TestBed.configureTestingModule({
    // provide the component-under-test and dependent service
    providers: [
      WelcomeComponent,
      { provide: UserService, useClass: MockUserService }
    ]
  });
  // inject both the component and the dependent service.
  comp = TestBed.get(WelcomeComponent);
  userService = TestBed.get(UserService);
});

Xem: https://angular.io/guide/testing#component-test-basics