It is being really painful to configure testing module for my unit tests in Angular.
The problem is that I don't have an easy way to see which are my dependencies, so what I do is to start karma with ng test. Then, I see the the components, modules or services missing in the errors page. I add the missing dependencies. Run again ng test. etc. Error. Add the missing...
This is an example of the dependencies I need for some unit tests:
TestBed.configureTestingModule({
declarations: [TestedComponent, X, Y, Z, A, B, C, D, E,F, G, H,I,J, K,L,M,N,O,P,Q,R,S,T,U,V,W, A2],
imports: [HttpClientTestingModule, TranslateModule.forChild(), TooltipModule, CheckboxModule, FormsModule, ReactiveFormsModule, KeyFilterModule,
DropdownModule, MultiSelectModule, CalendarModule, InputMaskModule, BlockUIModule, OverlayPanelModule, ProgressSpinnerModule,
AutoCompleteModule],
providers: [
TranslateStore,
{provide: XProvider, useFactory: () => createXServiceDummy()},
DateTimeFormatPipe,
{provide: YService, useValue: createYServiceServiceDummy()}
]
}).compileComponents();
It can take me 1 hour to prepare all the needed dependencies - that is crazy!
What am I doing wrong? How do you do this in your projects? It also get more complicated if I need to add spies for my services!
For all the child components, you should provide Stub Components instead of Actual Components https://angular.io/guide/testing#stubbing-unneeded-components. This way, you won't have to provide the dependencies of those child components or further grand child components and can only focus on the current component dependencies.
Also, for stub components, you can use this library https://www.npmjs.com/package/ng-mocks, which really shortens the syntax.
And if you are already doing so, and still have so many child components in one component, may be you should group them together.