How to test angular 2 component with nested components inside with their own dependencies ? (TestBed.configureTestingModule)

If you don't need to reference comp-b in any way in your tests you can add schemas: [NO_ERRORS_SCHEMA] or [CUSTOM_ELEMENTS_SCHEMA] to your TestBed configuration or override the comp-A's template and remove the tag for comp-b

If you do need to reference comp-b you may not need to provide it's dependencies specifically in an override.

Setting providers in overrideComponent is only necessary if the dependency is provided in the component itself. (If you have a providers list in comp-A.ts)

let's say comp-b needs a comp-AService and comp-AService is being provided in your comp-A override, since comp-b is a child of comp-A it will have comp-AService provided for it.

If you are providing these dependencies in your app.module or somewhere higher than the component itself you don't need to override. For example if comp-b needs comp-AService & someOtherService which are both being provided in your app.module your TestBed configuration could look like this:

TestBed.configureTestingModule({
  declarations: [comp-A, comp-B],
  imports: [ReactiveFormsModule],
  providers: [
    { provide: comp-AService, useValue: comp-AListSVC },
    { provide: someOtherService, useValue: someOtherServiceSVC }
  ]
})

Edit:

You can read more about nested component testing here:

https://angular.io/guide/testing-components-scenarios#nested-component-tests


Following a @yurzui 's advice:

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [comp-a],
      schemas: [NO_ERRORS_SCHEMA]
    })
      .compileComponents();
  }));