Prefer declared component instead of same component on imported module

Hi! First of all, thanks for your hard work simplificating my tests and I hope this becomes the de-facto library for Angular tests (as its name almost suggests it)✌

When we provide a service that’s already contained in one of the imorted modules, Angular Testing Library gives preference to the one on the providers array. 👍

import { MockProvider} from 'ng-mocks';

await render(ComponentToTest, {
      imports: [ModuleContainingServiceAbc],
      providers: [MockProvider(ServiceAbc)] // Succeeds to use this one
    });

I expected the same to happen on the declarations array, but this is not happening. Is this the implemented behavior? I’m not sure if I may be doing something wrong.

import { MockComponent } from 'ng-mocks';

await render(ComponentToTest, {
      imports: [ModuleContainingComponentAbc], 
      declarations: [MockComponent(ComponentAbc)] // Fails to use this one
    });

On my specific case, ComponentAbc is not directly declared and exported by ModuleContainingComponentAbc, but by another module that’s imported by ModuleContainingComponentAbc.

If you need details on how ng-mocks creates the mocks: https://ng-mocks.sudo.eu/api/MockProvider https://ng-mocks.sudo.eu/api/MockComponent

[marcioggs]

Hi. Sorry for the delay. The example below works using ngMocks.guts. Thanks @satanTime 👍

import { Component, NgModule } from '@angular/core';
import { render, screen } from '@testing-library/angular';
import { ngMocks } from 'ng-mocks';

@Component({
  selector: 'app-parent-component',
  template: '<app-child-component></app-child-component>',
})
class RealParentComponent {}

@Component({
  selector: 'app-child-component',
  template: '<p>Real child component</p>',
})
class RealChildComponent {}

@NgModule({
  declarations: [RealParentComponent, RealChildComponent],
})
export class RealModule {}

fdescribe('RealParentComponent', () => {
  it('Tests using Angular testing library', async () => {
    const dependencies = ngMocks.guts(null, RealModule, RealParentComponent);

    await render(RealParentComponent, dependencies);

    expect(screen.queryByText('Real child component')).toBeNull();
  });
});

@timdeschryver not being a fan of shallow rendering, what do you normally do instead? On my case the parent component has references to N child components, and these child components calls web-services on ngOnInit, so I wanted to avoid having to create mocks for each of these services. Thanks for the support!

[satanTime]

Hi @marcioggs,

in theory “exclude” option of ng-mocks should help you here:

const dependencies = ngMocks.guts(null, ModuleContainingServiceAbc, ComponentToTest);
await render(ComponentToTest, dependencies);

There is an article about spectator, however, the same should be true for angular-testing-library: https://ng-mocks.sudo.eu/extra/with-3rd-party.