Unit Testing angular2 компонент с импортированным модулем

Question

Я пытаюсь написать тест на компоненте, который использует угловой-Материал2, но когда я добавляю его в свои декларации testModule я получаю:

Error: Template parse errors: 
    'md-card-title' is not a known element: 
    1. If 'md-card-title' is an Angular component, then verify that it is part of this module. 
    2. If 'md-card-title' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. 

Добавления MaterialModule деклараций броски `Ошибка: Неожиданный модуль«»MaterialModule объявленного модуль

DynamicTestModule' in config/spec-bundle.js (line 24994)

Это то, что мой файл спецификация выглядит следующим образом:

beforeEach(() => TestBed.configureTestingModule({ 
    declarations: [], 
    providers: [ 
     { provide: DataService, useValue: mockDataService }, 
     { provide: ActivatedRoute, useClass: MockActivatedRoute }, 
     { provide: Router, useValue: mockRouter }, 
     CellViewComponent 
    ] 
    })); 

добавление CellViewComponent в массив объявлений вызывает ошибку.

Answer 1

Когда вы используете TestBed.configureTestingModule, вы создаете модуль с нуля для тестовой среды. Итак, что вам понадобится в реальном приложении для работы CellViewComponent, вам также необходимо настроить его в модуле тестирования.

В вашем случае отсутствует компонент материальной карты. В приложении вы, вероятно, либо импортировали MaterialModule, либо MdCardModule в свой AppModule. Так что вам нужно сделать то же самое в модуле тестирования

beforeEach(() => TestBed.configureTestingModule({ 
    imports: [ MaterialModule /* or MdCardModule */ ], 
    declarations: [ CellViewComponent ], 
    providers: [ 
    { provide: DataService, useValue: mockDataService }, 
    { provide: ActivatedRoute, useClass: MockActivatedRoute }, 
    { provide: Router, useValue: mockRouter }, 
    ] 
})); 

Answer 2

Это реальная проблема: вы можете издеваться все, кроме выбора импортированного компонента.

Существует простой способ. Это позволяет избежать импорта модулей, вместо этого вы можете просто отключить подобные ошибки.

Просто добавьте в ваш модуль:

import { NO_ERRORS_SCHEMA } from '@angular/core'; 

... 

TestBed.configureTestingModule({ 
    schemas: [ NO_ERRORS_SCHEMA ], 
    ... 

Angular2 docs link

Да, это не поможет, если вы хотите, чтобы сделать интеграцию (не изолированные) испытания, но он отлично работает для изолированных из них.

Даже если вы решите импортировать модуль, я думаю, что было бы правильнее импортировать модуль макета со всеми реализованными селекторами.