Bug: MockRender throws an error on mat-tab

[GITOrion8112]

In Angular Version 17 MockRender throws errors when a Component contains a Material Tab

For each contained in a Components Template an error is written to the console for each element in the template. If you have 3 tabs you will get the same error repeated 3 times in the console.

The test still gets a PASS outcome despite the exceptions. The problem comes with DevOps Pipelines. If you include the execution of the tests as part of the pipeline the Release will fail due to these errors.

jest -c jest.config.js

console.error
NG0303: Can't bind to 'ngIf' since it isn't a known property of 'div' (used in the '_MatTab' component template).
If the 'ngIf' is an Angular control flow directive, please make sure that either the 'NgIf' directive or the 'CommonModule' is included in the '@Component.imports' of this component.

  at reportUnknownPropertyError (node_modules/@angular/core/fesm2022/core.mjs:9757:17)
  at handleUnknownPropertyError (node_modules/@angular/core/fesm2022/core.mjs:9750:5)
  at elementPropertyInternal (node_modules/@angular/core/fesm2022/core.mjs:11717:13)
  at ɵɵproperty (node_modules/@angular/core/fesm2022/core.mjs:21280:9)
  at MockOf_MatTab_Template (ng:/MockOf_MatTab.js:60:9)
  at executeTemplate (node_modules/@angular/core/fesm2022/core.mjs:11268:9)
  at refreshView (node_modules/@angular/core/fesm2022/core.mjs:12791:13)
  at detectChangesInView$1 (node_modules/@angular/core/fesm2022/core.mjs:13015:9)
  at detectChangesInViewIfAttached (node_modules/@angular/core/fesm2022/core.mjs:12978:5)
  at detectChangesInComponent (node_modules/@angular/core/fesm2022/core.mjs:12967:5)
  at detectChangesInChildComponents (node_modules/@angular/core/fesm2022/core.mjs:13028:9)
  at refreshView (node_modules/@angular/core/fesm2022/core.mjs:12841:13)
  at detectChangesInView$1 (node_modules/@angular/core/fesm2022/core.mjs:13015:9)
  at detectChangesInViewIfAttached (node_modules/@angular/core/fesm2022/core.mjs:12978:5)
  at detectChangesInComponent (node_modules/@angular/core/fesm2022/core.mjs:12967:5)
  at detectChangesInChildComponents (node_modules/@angular/core/fesm2022/core.mjs:13028:9)
  at refreshView (node_modules/@angular/core/fesm2022/core.mjs:12841:13)
  at detectChangesInView$1 (node_modules/@angular/core/fesm2022/core.mjs:13015:9)
  at detectChangesInViewIfAttached (node_modules/@angular/core/fesm2022/core.mjs:12978:5)
  at detectChangesInComponent (node_modules/@angular/core/fesm2022/core.mjs:12967:5)
  at detectChangesInChildComponents (node_modules/@angular/core/fesm2022/core.mjs:13028:9)
  at refreshView (node_modules/@angular/core/fesm2022/core.mjs:12841:13)
  at detectChangesInView$1 (node_modules/@angular/core/fesm2022/core.mjs:13015:9)
  at detectChangesInViewWhileDirty (node_modules/@angular/core/fesm2022/core.mjs:12732:5)
  at detectChangesInternal (node_modules/@angular/core/fesm2022/core.mjs:12714:9)
  at ViewRef$1.detectChanges (node_modules/@angular/core/fesm2022/core.mjs:13310:9)
  at node_modules/@angular/core/fesm2022/testing.mjs:352:36
  at _ZoneDelegate.invoke (node_modules/zone.js/bundles/zone.umd.js:412:32)
  at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/bundles/zone-testing.umd.js:2164:43)
  at _ZoneDelegate.invoke (node_modules/zone.js/bundles/zone.umd.js:411:38)
  at Object.onInvoke (node_modules/@angular/core/fesm2022/core.mjs:18555:33)
  at _ZoneDelegate.invoke (node_modules/zone.js/bundles/zone.umd.js:411:38)
  at ZoneImpl.run (node_modules/zone.js/bundles/zone.umd.js:147:47)
  at NgZone.run (node_modules/@angular/core/fesm2022/core.mjs:18406:28)
  at PseudoApplicationComponentFixture.detectChanges (node_modules/@angular/core/fesm2022/testing.mjs:351:22)
  at template (node_modules/ng-mocks/webpack:/ng-mocks/libs/ng-mocks/src/lib/mock-render/mock-render-factory.ts:162:37)
  at t.MockRender (node_modules/ng-mocks/index.js:1:219334)
  at src/app/app.component.spec.ts:10:35
  at _ZoneDelegate.invoke (node_modules/zone.js/bundles/zone.umd.js:412:32)
  at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/bundles/zone-testing.umd.js:2164:43)
  at _ZoneDelegate.invoke (node_modules/zone.js/bundles/zone.umd.js:411:38)
  at ZoneImpl.run (node_modules/zone.js/bundles/zone.umd.js:147:47)
  at Object.wrappedFunc (node_modules/zone.js/bundles/zone-testing.umd.js:450:38)

PASS src/app/app.component.spec.ts
AppComponent
√ should create the app (310 ms)

I have attached a zip file containing a simple Angular Application that demonstrates the issue. I have removed the node modules to reduce the size of the file.

Expected vs actual behavior

The tests of the Component containing Material Tabs should pass without throwing errors.

mat-tab-error-issue.zip

[GipHub123]

@GITOrion8112

Error message hints that CommonModule is not available in your test case setup. Try adding missing imports.

beforeEach(async () => {
  return MockBuilder(AppComponent)
    .keep(RouterOutlet)
    .keep(CommonModule)
    .keep(MatTabsModule)
});

[GITOrion8112]

I tried what you suggested, doesn't fix the problem. Sorry that's not it.

You don't have to import CommonModule in any other Component Tests, and it's definitely imported into the Component being tested. I have used many of the Material Components in my application, not all of them, and so far I have only come across this problem is when a Mat Tab is used in a Component.

This problem did not occur in version 16 of Angular. It appeared with Angular 17.

When I upgraded to Angular 17 I also upgraded my version of ng-mocks to the latest.

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { MatTabsModule } from '@angular/material/tabs';

@component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet,
CommonModule,
MatTabsModule],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {

}

[dhutaryan]

I have the same issue for my own component

[clara-belair]

Hi, we have an error since we migrated from angular 16 to angular 17. We are currently on the latest version of ng-mocks (14.13.0, the previous version was 14.11.0). We are using the library NG-ZORRO, it's the equivalent of Angular Material. We also have this kind of error on unit tests :

Error: NG0303: Can't bind to 'ngIf' since it isn't a known property of 'div' (used in the '_NzTabComponent' component template). If the 'ngIf' is an Angular control flow directive, please make sure that either the 'NgIf' directive or the 'CommonModule' is included in the '@Component.imports' of this component.

Before this migration, the units tests were all good, but now, every files that mock NzTabsModule have this error.

We hope that this PR : #9314 will fix the problem.

Can we have any update on when this fix will be release please ? Thx.

[satanTime]

v14.13.1 has been released and contains a fix for the issue. Feel free to reopen the issue or to submit a new one if you meet any problems.