angulartypescriptunit-testingangular-flex-layoutangular-unit-test

Angular Unit Test TypeError: this._renderer.addClass is not a function

After updating, my previously passing unit tests now fail with the error: 'TypeError: this._renderer.addClass is not a function' across multiple tests, despite not using or importing the renderer in the component itself. Any insights into this error?

TypeError: this._renderer.addClass is not a function
            at forEach (node_modules/@angular/common/fesm2022/common.mjs:2729:36)
            at Array.forEach (<anonymous>)
            at NgClass._toggleClass (node_modules/@angular/common/fesm2022/common.mjs:2727:36)
            at NgClass._applyStateDiff (node_modules/@angular/common/fesm2022/common.mjs:2705:22)
            at NgClass.ngDoCheck (node_modules/@angular/common/fesm2022/common.mjs:2685:14)
            at DefaultClassDirective.call [as ngDoCheck] (node_modules/@angular/flex-layout/fesm2020/angular-flex-layout-extended.mjs:151:30)
            at callHookInternal (node_modules/@angular/core/fesm2022/core.mjs:3607:14)
            at callHook (node_modules/@angular/core/fesm2022/core.mjs:3638:9)
            at callHooks (node_modules/@angular/core/fesm2022/core.mjs:3589:17)
            at executeInitAndCheckHooks (node_modules/@angular/core/fesm2022/core.mjs:3539:9)
Chrome Headless 121.0.6167.184 (Windows 10): Executed 8 of 230 (1 FAILED) (0 secs / 0.852 secs)


"devDependencies": {
    "@angular-devkit/build-angular": "^17.1.3",
    "@angular/compiler-cli": "17.1.3",
    "@angular/language-service": "^17.1.3",
    "@ngrx/store-devtools": "^17.1.0",
    "@types/jasmine": "^5.1.1",
    "@types/jasminewd2": "^2.0.12",
    "@types/node": "^20.11.17",
    "codelyzer": "^0.0.28",
    "eslint": "^8.56.0",
    "jasmine-core": "~5.1.2",
    "jasmine-spec-reporter": "~7.0.0",
    "karma": "^6.4.2",
    "karma-chrome-launcher": "^3.2.0",
    "karma-coverage": "^2.2.1",
    "karma-coverage-istanbul-reporter": "~3.0.3",
    "karma-jasmine": "^5.1.0",
    "karma-jasmine-html-reporter": "^2.0.0",
    "ts-node": "~10.9.2",
    "typescript": "~5.3.3"
  }

I've identified the source of the issue: it's the block containing [ngClass.lg]="'mrg-rt-10'". When I remove this block, everything works fine. Any insights on this?

<span *ngIf="eventForm.get('all_day').value === false" fxFlex="50%" fxFlex.xs="100%" [ngClass.lg]="'mrg-rt-10'"> </span>
Solution

  • The issue arose in the new Angular Material release when using ngClass with screen queries like ngClass.sm or ngClass.lg. Switching to ngStyle.sm resolved the problem.