Angular: Как создать модуль тестирования для функции в приложении Angular?

#angular #unit-testing #testing #dependency-injection #module

Вопрос:

У меня есть «нормальный» (в этом нет ничего особенного) Угловое приложение с некоторыми общими функциями. Поскольку я хочу избежать насмешек над этими общими функциями в компонентных тестах снова и снова, я подумывал о том, чтобы представить версию тестового модуля для каждой функции. Это должно выглядеть примерно так:

 SharedModule  |  |- drop-zone  | |_ (module contents skipped for brevity)  | |_ drop-zone.module.ts  | |_ drop-zone-testing.module.ts  |  |- other-features...  
  • Это drop-zone.module.ts должен быть угловой модуль, включающий все «prod / normal» declarations services и так далее.
  • К drop-zone-testing.module.ts ним также следует отнести, например, «обычные» declarations , но поддельные сервисы.

Но при этом я получаю угловую ошибку при запуске ng build :

 The Component 'FileDropZoneComponent' is declared by more than one NgModule. - 'FileDropZoneComponent' is listed in the declarations of the NgModule 'FileDropTestingModule'. - 'FileDropZoneComponent' is listed in the declarations of the NgModule 'FileDropModule'.  

Я уже пытался удалить все testing-module файлы из угловой сборки с помощью шаблона *testing.module.ts в tsconfig exclude ,но безрезультатно :/ Я подумал, что исключение этих модулей из сборки должно помешать angular жаловаться на присутствие двух модулей с одним и тем же объявлением. Но это не работает.

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

Ответ №1:

Я понял, как это сделать — но это похоже на обходной путь, который даже не имеет для меня особого смысла 😀 Но он работает как в тестах, так и при сборке:

Я должен упомянуть, что в своем решении я все равно удалил файл, в котором я определяю своего собственного декоратора в via tsconfig.app.json :

 {  "exclude": ["src/**/testing/**/*"], }  
  1. Создайте свой собственный декоратор, который просто обернет NgModule декоратора:
 // e.g. src/shared/testing/utils.ts export function NgTestingModule(obj: NgModule) {  return NgModule(obj); }  
  1. используйте в своих модулях тестирования:
 import { NgTestingModule } from '../testing/utils';  @NgTestingModule({ ... }) export class DropZoneTestingModule {}  
  1. и в ваших тестах:
 TestBed.configureTestingModule({  imports: [DropZoneTestingModule], });