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