ng-mocks
ng-mocks copied to clipboard
Bug: MockComponent (Standalone) mocks all components not just the ones specified
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?