Какой бы тест я ни создал в своем проекте Angular, он терпит неудачу из-за ошибки: недопустимое состояние: не удалось загрузить сводку для директивы NotFoundComponent

Question

У меня есть проект Angular, что любой файл спецификаций, созданный мной для тестирования любого компонента, дает сбой из-за ошибки: недопустимое состояние: не удалось загрузить сводку для директивы ...

Например, я создал компонент, которыйсодержит некоторые теги дизайна материалов и принадлежит модулю PagesModule, компонент ничего не делает:

pages.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { SharedModule } from '../_shared/shared.module';
import { NotFoundComponent } from './error/not-found/not-found.component';

@NgModule({
    declarations: [NotFoundComponent],
    imports: [SharedModule, RouterModule],
    exports: [],
    providers: []
})
export class PagesModule {}

not-found.component.spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MatCardModule } from '@angular/material';
import { NotFoundComponent } from './not-found.component';

describe('NotFoundComponent', () => {
    let component: NotFoundComponent;
    let fixture: ComponentFixture<NotFoundComponent>;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [SharedModule],
            declarations: [NotFoundComponent]
        }).compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(NotFoundComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    it('should create', () => {
        expect(component).toBeDefined();
    });
});

Дополнительная информация: Мой SharedModule уже экспортирует все необходимые модули материалов.

Answer 1

Ваш NotFoundComponent может содержать вложенные компоненты или директивы, шаблоны которых могут содержать больше компонентов. В ваших тестах в основном есть две техники (см. Тесты вложенных компонентов ).

1. создает и объявляет версии-заглушки компонентов и директив
2. добавляет NO_ERRORS_SCHEMA к метаданным TestBed.schemas.

При выборе первогоРешения, ваш тест может выглядеть примерно так.

@Component({selector: 'app-nested', template: ''})
class NestedStubComponent {}

describe('NotFoundComponent', () => {
    ...

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [SharedModule],
            declarations: [NotFoundComponent]
        }).compileComponents();
    }));

При выборе второго решения, TestBed.configureTestingModule придется изменить следующим образом.

TestBed.configureTestingModule({
    imports: [SharedModule],
    declarations: [NotFoundComponent],
    schemas: [NO_ERRORS_SCHEMA]
}).compileComponents();