ng-mocks icon indicating copy to clipboard operation
ng-mocks copied to clipboard

Bug: MockComponent (Standalone) mocks all components not just the ones specified

Open Kogs opened this issue 3 months ago • 3 comments

Description of the bug

Using MockComponent to mock one dependent child Component all other child Components are mocked as well.

An example of the bug

If you have total 3 components (All Components are Standalone): MyComp
MyComp1
MyComp2
And you want to Test MyComp but mock MyComp1 and keep the real MyComp2. The following example will result in all Components (MyComp1 & MyComp2) to get Mocked for some reason.

<app-my-comp1></app-my-comp1>
<app-my-comp2></app-my-comp2>
describe('MyComp', () => {
 beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [
         MockComponent(MyComp1)
      ],
      imports: [
          MyComp
      ]
    }).compileComponents();
   ....
});

After a lot of try and error I figured out how to solve this.
Workaround:

await TestBed.configureTestingModule({
  declarations: [
    MockComponent(MyComp1),
    MyComp2
  ],
  imports: [
      MyComp
  ]
}).compileComponents();

By adding the MyComp2 to the declarations everything works as expected.
I also tried to move declarations into the imports section like it's suggested for Standalone components, but this didn't make any difference.

Angular: 17.1.2 (Standalone Components) NgMocks: 14.12.1

Expected vs actual behavior

I would expect that only the specified Components that I put into MockComponent are replaced with Mock variants not everything else?

Kogs avatar Apr 03 '24 09:04 Kogs