feat: update to Angular v22 (#581)

timdeschryver · web-flow · commit 55ded00c7b6b · 2026-06-04T21:16:11.000+02:00
diff --git a/.npmrc b/.npmrc
@@ -1,2 +1,3 @@
 registry=https://registry.npmjs.org/
 package-lock=false
+legacy-peer-deps=true
diff --git a/README.md b/README.md
@@ -179,6 +179,7 @@ You may also be interested in installing `jest-dom` so you can use
 
 | Angular | Angular Testing Library            |
 | ------- | ---------------------------------- |
+| 22.x    | 19.x                               |
 | 21.x    | 19.x                               |
 | 20.x    | 18.x, 17.x, 16.x, 15.x, 14.x, 13.x |
 | 19.x    | 17.x, 16.x, 15.x, 14.x, 13.x       |
diff --git a/apps/example-app-jest/tsconfig.app.json b/apps/example-app-jest/tsconfig.app.json
@@ -9,5 +9,13 @@
   },
   "files": ["src/main.ts"],
   "include": ["src/**/*.d.ts"],
-  "exclude": ["**/*.test.ts", "**/*.spec.ts", "jest.config.ts"]
+  "exclude": ["**/*.test.ts", "**/*.spec.ts", "jest.config.ts"],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
+  }
 }
diff --git a/apps/example-app-karma/src/app/issues/issue-491.spec.ts b/apps/example-app-karma/src/app/issues/issue-491.spec.ts
@@ -1,4 +1,4 @@
-import { Component, inject } from '@angular/core';
+import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
 import { Router } from '@angular/router';
 import { render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
@@ -35,6 +35,7 @@ it('test click event with router.navigate', async () => {
 });
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.Eager,
   template: `
     <h1>Login</h1>
     <button type="submit" (click)="onSubmit()">submit</button>
@@ -50,6 +51,7 @@ class LoginComponent {
 }
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.Eager,
   template: ` <h1>Logged In</h1> `,
 })
 class LoggedInComponent {}
diff --git a/apps/example-app-karma/tsconfig.app.json b/apps/example-app-karma/tsconfig.app.json
@@ -9,5 +9,13 @@
   },
   "files": ["src/main.ts"],
   "include": ["src/**/*.d.ts"],
-  "exclude": ["**/*.test.ts", "**/*.spec.ts"]
+  "exclude": ["**/*.test.ts", "**/*.spec.ts"],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
+  }
 }
diff --git a/apps/example-app-karma/tsconfig.json b/apps/example-app-karma/tsconfig.json
@@ -5,7 +5,7 @@
   "compilerOptions": {
     "target": "es2020",
     "paths": {
-      "@testing-library/angular": ["projects/testing-library"]
+      "@testing-library/angular": ["./../../projects/testing-library"]
     }
   },
   "angularCompilerOptions": {
diff --git a/apps/example-app-karma/tsconfig.spec.json b/apps/example-app-karma/tsconfig.spec.json
@@ -7,5 +7,13 @@
     "useDefineForClassFields": false
   },
   "files": ["src/test.ts"],
-  "include": ["**/*.spec.ts", "**/*.d.ts"]
+  "include": ["**/*.spec.ts", "**/*.d.ts"],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
+  }
 }
diff --git a/apps/example-app/tsconfig.app.json b/apps/example-app/tsconfig.app.json
@@ -9,5 +9,13 @@
   },
   "files": ["src/main.ts"],
   "include": ["src/**/*.d.ts"],
-  "exclude": ["**/*.test.ts", "**/*.spec.ts"]
+  "exclude": ["**/*.test.ts", "**/*.spec.ts"],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
+  }
 }
diff --git a/apps/example-app/tsconfig.json b/apps/example-app/tsconfig.json
@@ -5,8 +5,8 @@
   "compilerOptions": {
     "target": "es2020",
     "paths": {
-      "@testing-library/angular": ["projects/testing-library"],
-      "@testing-library/angular/vitest-utils": ["projects/testing-library/vitest-utils"]
+      "@testing-library/angular": ["./../../projects/testing-library"],
+      "@testing-library/angular/vitest-utils": ["./../../projects/testing-library/vitest-utils"]
     }
   },
   "angularCompilerOptions": {
diff --git a/package.json b/package.json
@@ -20,37 +20,37 @@
     "prepare": "git config core.hookspath .githooks"
   },
   "dependencies": {
-    "@angular/animations": "21.0.5",
-    "@angular/cdk": "21.0.3",
-    "@angular/common": "21.0.5",
-    "@angular/compiler": "21.0.5",
-    "@angular/core": "21.0.5",
-    "@angular/material": "21.0.3",
-    "@angular/platform-browser": "21.0.5",
-    "@angular/platform-browser-dynamic": "21.0.5",
-    "@angular/router": "21.0.5",
-    "@ngrx/store": "20.0.0",
+    "@angular/animations": "22.0.0",
+    "@angular/cdk": "22.0.0",
+    "@angular/common": "22.0.0",
+    "@angular/compiler": "22.0.0",
+    "@angular/core": "22.0.0",
+    "@angular/material": "22.0.0",
+    "@angular/platform-browser": "22.0.0",
+    "@angular/platform-browser-dynamic": "22.0.0",
+    "@angular/router": "22.0.0",
+    "@ngrx/store": "21.1.0",
     "@testing-library/dom": "^10.4.1",
     "rxjs": "7.8.0",
     "tslib": "~2.8.1",
     "zone.js": "^0.15.1"
   },
   "devDependencies": {
     "@angular-builders/jest": "^20.0.0",
-    "@angular-devkit/core": "21.0.3",
-    "@angular-devkit/schematics": "21.0.3",
+    "@angular-devkit/core": "22.0.0",
+    "@angular-devkit/schematics": "22.0.0",
     "@angular-eslint/builder": "21.1.0",
     "@angular-eslint/eslint-plugin": "21.1.0",
     "@angular-eslint/eslint-plugin-template": "21.1.0",
     "@angular-eslint/schematics": "21.1.0",
     "@angular-eslint/template-parser": "21.1.0",
-    "@angular/build": "^21.0.3",
-    "@angular/cli": "~21.0.3",
-    "@angular/compiler-cli": "21.0.5",
-    "@angular/forms": "21.0.5",
-    "@angular/language-service": "21.0.5",
+    "@angular/build": "^22.0.0",
+    "@angular/cli": "~22.0.0",
+    "@angular/compiler-cli": "22.0.0",
+    "@angular/forms": "22.0.0",
+    "@angular/language-service": "22.0.0",
     "@eslint/eslintrc": "^3.3.1",
-    "@schematics/angular": "21.0.3",
+    "@schematics/angular": "22.0.0",
     "@testing-library/jasmine-dom": "^1.3.3",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/user-event": "^14.6.1",
@@ -66,6 +66,7 @@
     "eslint": "^9.39.1",
     "eslint-plugin-jest-dom": "~5.5.0",
     "eslint-plugin-testing-library": "~7.13.3",
+    "istanbul-lib-instrument": "^6.0.3",
     "jasmine-core": "4.2.0",
     "jasmine-spec-reporter": "7.0.0",
     "jest": "30.2.0",
@@ -78,10 +79,10 @@
     "karma-jasmine-html-reporter": "2.0.0",
     "lint-staged": "^16.2.6",
     "ng-mocks": "^14.14.0",
-    "ng-packagr": "21.0.0",
+    "ng-packagr": "22.0.0",
     "prettier": "2.6.2",
     "rimraf": "^6.1.0",
-    "typescript": "5.9.3",
+    "typescript": "6.0.3",
     "typescript-eslint": "^8.46.3",
     "vitest": "4.0.15"
   }
diff --git a/projects/testing-library/src/lib/testing-library.ts b/projects/testing-library/src/lib/testing-library.ts
@@ -679,7 +679,11 @@ if (typeof process === 'undefined' || !process?.env?.['ATL_SKIP_AUTO_CLEANUP'])
   }
 }
 
-@Component({ selector: 'atl-wrapper-component', template: '', standalone: false })
+@Component({
+  selector: 'atl-wrapper-component',
+  template: '',
+  standalone: false,
+})
 class WrapperComponent {}
 
 /**
diff --git a/projects/testing-library/src/tests/wait-for-element-to-be-removed.spec.ts b/projects/testing-library/src/tests/wait-for-element-to-be-removed.spec.ts
@@ -1,18 +1,20 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, signal } from '@angular/core';
 import { render, screen, waitForElementToBeRemoved } from '../public_api';
 import { timer } from 'rxjs';
 import { test, expect } from 'vitest';
-import { NgIf } from '@angular/common';
 
 @Component({
   selector: 'atl-fixture',
-  template: ` <div *ngIf="visible" data-testid="im-here">👋</div> `,
-  imports: [NgIf],
+  template: `
+    @if (visible()) {
+    <div data-testid="im-here">👋</div>
+    }
+  `,
 })
 class FixtureComponent implements OnInit {
-  visible = true;
+  visible = signal(true);
   ngOnInit() {
-    timer(500).subscribe(() => (this.visible = false));
+    timer(500).subscribe(() => this.visible.set(false));
   }
 }
 
diff --git a/projects/testing-library/src/tests/wait-for.spec.ts b/projects/testing-library/src/tests/wait-for.spec.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, signal } from '@angular/core';
 import { timer } from 'rxjs';
 import { test } from 'vitest';
 import { render, screen, waitFor, fireEvent } from '../public_api';
@@ -7,14 +7,14 @@ import { render, screen, waitFor, fireEvent } from '../public_api';
   selector: 'atl-fixture',
   template: `
     <button data-testid="button" (click)="load()">Load</button>
-    <div>{{ result }}</div>
+    <div>{{ result() }}</div>
   `,
 })
 class FixtureComponent {
-  result = '';
+  result = signal<string>('');
 
   load() {
-    timer(500).subscribe(() => (this.result = 'Success'));
+    timer(500).subscribe(() => this.result.set('Success'));
   }
 }
 
diff --git a/projects/testing-library/tsconfig.lib.json b/projects/testing-library/tsconfig.lib.json
@@ -10,5 +10,13 @@
     "useDefineForClassFields": false
   },
   "exclude": ["src/test-setup.ts", "**/*.spec.ts", "**/*.test.ts"],
-  "include": ["**/*.ts"]
+  "include": ["**/*.ts"],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
+  }
 }
diff --git a/projects/testing-library/tsconfig.lib.prod.json b/projects/testing-library/tsconfig.lib.prod.json
@@ -6,7 +6,13 @@
     "useDefineForClassFields": false
   },
   "angularCompilerOptions": {
-    "compilationMode": "partial"
+    "compilationMode": "partial",
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
   },
   "exclude": ["src/test-setup.ts", "**/*.spec.ts", "**/*.test.ts"]
 }
diff --git a/projects/testing-library/tsconfig.schematics.json b/projects/testing-library/tsconfig.schematics.json
@@ -5,9 +5,11 @@
     "target": "ES2020",
     "module": "commonjs",
     "moduleResolution": "node",
+    "ignoreDeprecations": "6.0",
     "esModuleInterop": true,
     "resolveJsonModule": true,
     "forceConsistentCasingInFileNames": true,
+    "rootDir": "./schematics",
     "outDir": "../../dist/@testing-library/angular/schematics",
     "removeComments": true,
     "skipLibCheck": true,
diff --git a/projects/testing-library/zoneless/src/public_api.ts b/projects/testing-library/zoneless/src/public_api.ts
@@ -317,7 +317,11 @@ function setWrapperProperties<SutType>(
   return fixture;
 }
 
-@Component({ selector: 'atl-wrapper-component', template: '', standalone: false })
+@Component({
+  selector: 'atl-wrapper-component',
+  template: '',
+  standalone: false,
+})
 class WrapperComponent {}
 
 export * from '@testing-library/dom';
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,7 +1,6 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
-    "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,
     "strict": true,

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,3 @@`
`1`	`1`	`registry=https://registry.npmjs.org/`
`2`	`2`	`package-lock=false`
	`3`	`+legacy-peer-deps=true`
Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@`
`5`	`5`	`"compilerOptions": {`
`6`	`6`	`"target": "es2020",`
`7`	`7`	`"paths": {`
`8`		`- "@testing-library/angular": ["projects/testing-library"]`
	`8`	`+ "@testing-library/angular": ["./../../projects/testing-library"]`
`9`	`9`	`}`
`10`	`10`	`},`
`11`	`11`	`"angularCompilerOptions": {`