feat: update to Angular 21 (and switch to Vitest)

.github/workflows/ci.yml

@@ -36,10 +36,13 @@ jobs:
         run: npm install --force
       - name: build
         run: npm run build -- --skip-nx-cache
+        timeout-minutes: 5
       - name: test
         run: npm run test
+        timeout-minutes: 5
       - name: lint
         run: npm run lint
+        timeout-minutes: 5
       - name: Release
         if: github.repository == 'testing-library/angular-testing-library' && (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/beta')
         run: npx semantic-release

angular.json

@@ -18,7 +18,7 @@
       "prefix": "lib",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "builder": "@angular/build:ng-packagr",
           "options": {
             "project": "projects/testing-library/ng-package.json"
           },
@@ -33,9 +33,9 @@
           "defaultConfiguration": "production"
         },
         "test": {
-          "builder": "@angular-builders/jest:run",
+          "builder": "@angular/build:unit-test",
           "options": {
-            "configPath": "projects/testing-library/jest.config.ts"
+            "setupFiles": ["projects/testing-library/test-setup.ts"]
           }
         },
         "lint": {
@@ -53,16 +53,17 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular/build:application",
           "options": {
-            "outputPath": "dist/apps/example-app",
+            "outputPath": {
+              "base": "dist/apps/example-app"
+            },
             "index": "apps/example-app/src/index.html",
-            "main": "apps/example-app/src/main.ts",
-            "polyfills": "apps/example-app/src/polyfills.ts",
             "tsConfig": "apps/example-app/tsconfig.app.json",
             "assets": ["apps/example-app/src/favicon.ico", "apps/example-app/src/assets"],
-            "styles": ["apps/example-app/src/styles.css"],
-            "scripts": []
+            "styles": [],
+            "scripts": [],
+            "browser": "apps/example-app/src/main.ts"
           },
           "configurations": {
             "production": {
@@ -75,9 +76,7 @@
               "outputHashing": "all"
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
               "sourceMap": true,
               "namedChunks": true
@@ -86,7 +85,7 @@
           "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "configurations": {
             "production": {
               "buildTarget": "example-app:build:production"
@@ -97,16 +96,10 @@
           },
           "defaultConfiguration": "development"
         },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "buildTarget": "example-app:build"
-          }
-        },
         "test": {
-          "builder": "@angular-builders/jest:run",
+          "builder": "@angular/build:unit-test",
           "options": {
-            "configPath": "apps/example-app/jest.config.ts"
+            "setupFiles": ["apps/example-app/test-setup.ts"]
           }
         },
         "lint": {
@@ -124,15 +117,17 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular/build:application",
           "options": {
-            "outputPath": "dist/apps/example-app-karma",
+            "outputPath": {
+              "base": "dist/apps/example-app-karma"
+            },
             "index": "apps/example-app-karma/src/index.html",
-            "main": "apps/example-app-karma/src/main.ts",
             "tsConfig": "apps/example-app-karma/tsconfig.app.json",
             "assets": ["apps/example-app-karma/src/favicon.ico", "apps/example-app-karma/src/assets"],
             "styles": [],
-            "scripts": []
+            "scripts": [],
+            "browser": "apps/example-app-karma/src/main.ts"
           },
           "configurations": {
             "production": {
@@ -145,9 +140,7 @@
               "outputHashing": "all"
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
               "sourceMap": true,
               "namedChunks": true
@@ -156,7 +149,7 @@
           "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "configurations": {
             "production": {
               "buildTarget": "example-app-karma:build:production"
@@ -168,7 +161,7 @@
           "defaultConfiguration": "development"
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:karma",
           "options": {
             "main": "apps/example-app-karma/src/test.ts",
             "tsConfig": "apps/example-app-karma/tsconfig.spec.json",

apps/example-app-karma/karma.conf.js

@@ -5,11 +5,7 @@ module.exports = function (config) {
     config.set({
       basePath: '',
       frameworks: ['jasmine', '@angular-devkit/build-angular'],
-      plugins: [
-        require('karma-jasmine'),
-        require('karma-chrome-launcher'),
-        require('@angular-devkit/build-angular/plugins/karma'),
-      ],
+      plugins: [require('karma-jasmine'), require('karma-chrome-launcher')],
       client: {
         jasmine: {
           // you can add configuration options for Jasmine here

apps/example-app-karma/src/app/examples/login-form.spec.ts

@@ -2,7 +2,6 @@ import { Component, inject } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/angular';
-import { NgIf } from '@angular/common';
 
 it('should create a component with inputs and a button to submit', async () => {
   await render(LoginComponent);
@@ -31,15 +30,19 @@ it('should display invalid message and submit button must be disabled', async ()
 @Component({
   selector: 'atl-login',
   standalone: true,
-  imports: [ReactiveFormsModule, NgIf],
+  imports: [ReactiveFormsModule],
   template: `
     <h1>Login</h1>
 
     <form [formGroup]="form" (submit)="onSubmit(form)">
       <input type="email" aria-label="email" formControlName="email" />
-      <div *ngIf="email.invalid && (email.dirty || email.touched)" role="alert">Email is invalid</div>
+      @if (email.invalid && (email.dirty || email.touched)) {
+      <div role="alert">Email is invalid</div>
+      }
       <input type="password" aria-label="password" formControlName="password" />
-      <div *ngIf="password.invalid && (password.dirty || password.touched)" role="alert">Password is invalid</div>
+      @if (password.invalid && (password.dirty || password.touched)) {
+      <div role="alert">Password is invalid</div>
+      }
       <button type="submit" aria-label="submit" [disabled]="form.invalid">Submit</button>
     </form>
   `,

apps/example-app-karma/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.base.json",
+  "extends": "../../tsconfig.json",
   "files": [],
   "include": [],
   "compilerOptions": {

apps/example-app-karma/tsconfig.spec.json

@@ -2,7 +2,7 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
-    "types": ["jasmine", "node", "@testing-library/jasmine-dom"],
+    "types": ["node", "@testing-library/jasmine-dom"],
     "target": "ES2022",
     "useDefineForClassFields": false
   },

apps/example-app/src/app/examples/00-single-component.spec.ts

@@ -1,3 +1,4 @@
+import { test, expect } from 'vitest';
 import { render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
 

apps/example-app/src/app/examples/01-nested-component.spec.ts

@@ -1,3 +1,4 @@
+import { test, expect } from 'vitest';
 import { render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
 

apps/example-app/src/app/examples/02-input-output.spec.ts

@@ -1,11 +1,12 @@
+import { test, expect, vi } from 'vitest';
 import { render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
 
 import { InputOutputComponent } from './02-input-output';
 
 test('is possible to set input and listen for output', async () => {
   const user = userEvent.setup();
-  const sendValue = jest.fn();
+  const sendValue = vi.fn();
 
   await render(InputOutputComponent, {
     inputs: {
@@ -34,7 +35,7 @@ test('is possible to set input and listen for output', async () => {
 
 test.skip('is possible to set input and listen for output with the template syntax', async () => {
   const user = userEvent.setup();
-  const sendSpy = jest.fn();
+  const sendSpy = vi.fn();
 
   await render('<atl-fixture [value]="47" (sendValue)="sendValue($event)" />', {
     imports: [InputOutputComponent],
@@ -61,7 +62,7 @@ test.skip('is possible to set input and listen for output with the template synt
 
 test('is possible to set input and listen for output (deprecated)', async () => {
   const user = userEvent.setup();
-  const sendValue = jest.fn();
+  const sendValue = vi.fn();
 
   await render(InputOutputComponent, {
     inputs: {
@@ -92,7 +93,7 @@ test('is possible to set input and listen for output (deprecated)', async () =>
 
 test('is possible to set input and listen for output with the template syntax (deprecated)', async () => {
   const user = userEvent.setup();
-  const sendSpy = jest.fn();
+  const sendSpy = vi.fn();
 
   await render('<atl-fixture [value]="47" (sendValue)="sendValue($event)" />', {
     imports: [InputOutputComponent],

apps/example-app/src/app/examples/03-forms.spec.ts

@@ -1,3 +1,4 @@
+import { test, expect } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
 

apps/example-app/src/app/examples/04-forms-with-material.spec.ts

@@ -1,3 +1,4 @@
+import { test, expect } from 'vitest';
 import { render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
 

apps/example-app/src/app/examples/05-component-provider.spec.ts

@@ -1,6 +1,7 @@
+import { test, expect } from 'vitest';
 import { TestBed } from '@angular/core/testing';
 import { render, screen } from '@testing-library/angular';
-import { provideMock, Mock, createMock } from '@testing-library/angular/jest-utils';
+import { provideMock, Mock, createMock } from '@testing-library/angular/vitest-utils';
 import userEvent from '@testing-library/user-event';
 
 import { ComponentWithProviderComponent, CounterService } from './05-component-provider';
@@ -31,7 +32,7 @@ test('renders the current value and can increment and decrement', async () => {
   expect(valueControl).toHaveTextContent('1');
 });
 
-test('renders the current value and can increment and decrement with a mocked jest-utils service', async () => {
+test('renders the current value and can increment and decrement with a mocked vitest-utils service', async () => {
   const user = userEvent.setup();
 
   const counter = createMock(CounterService);
@@ -63,7 +64,7 @@ test('renders the current value and can increment and decrement with a mocked je
   expect(valueControl).toHaveTextContent('60');
 });
 
-test('renders the current value and can increment and decrement with provideMocked from jest-utils', async () => {
+test('renders the current value and can increment and decrement with provideMocked from vitest-utils', async () => {
   const user = userEvent.setup();
 
   await render(ComponentWithProviderComponent, {

apps/example-app/src/app/examples/06-with-ngrx-store.spec.ts

@@ -1,3 +1,4 @@
+import { test, expect } from 'vitest';
 import { render, screen } from '@testing-library/angular';
 import { StoreModule } from '@ngrx/store';
 import userEvent from '@testing-library/user-event';

apps/example-app/src/app/examples/07-with-ngrx-mock-store.spec.ts

@@ -1,5 +1,6 @@
 import { TestBed } from '@angular/core/testing';
 import { provideMockStore, MockStore } from '@ngrx/store/testing';
+import { test, expect, vi } from 'vitest';
 import { render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
 
@@ -22,7 +23,7 @@ test('works with provideMockStore', async () => {
   });
 
   const store = TestBed.inject(MockStore);
-  store.dispatch = jest.fn();
+  store.dispatch = vi.fn();
 
   await user.click(screen.getByText(/seven/i));
 

apps/example-app/src/app/examples/08-directive.spec.ts

@@ -1,3 +1,4 @@
+import { test, expect } from 'vitest';
 import { Component } from '@angular/core';
 import { render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';

apps/example-app/src/app/examples/09-router.spec.ts

@@ -1,3 +1,4 @@
+import { test, expect } from 'vitest';
 import { render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
 

apps/example-app/src/app/examples/10-inject-token-dependency.spec.ts

@@ -1,3 +1,4 @@
+import { test, expect } from 'vitest';
 import { render, screen } from '@testing-library/angular';
 
 import { DataInjectedComponent, DATA } from './10-inject-token-dependency';

apps/example-app/src/app/examples/11-ng-content.spec.ts

@@ -1,3 +1,4 @@
+import { test, expect } from 'vitest';
 import { render, screen } from '@testing-library/angular';
 
 import { CellComponent } from './11-ng-content';

apps/example-app/src/app/examples/12-service-component.spec.ts

@@ -1,6 +1,7 @@
 import { of } from 'rxjs';
+import { test, expect, vi } from 'vitest';
 import { render, screen } from '@testing-library/angular';
-import { createMock } from '@testing-library/angular/jest-utils';
+import { createMock } from '@testing-library/angular/vitest-utils';
 
 import { Customer, CustomersComponent, CustomersService } from './12-service-component';
 
@@ -47,7 +48,7 @@ test('renders the provided customers with createMock', async () => {
   ];
 
   const customersService = createMock(CustomersService);
-  customersService.load = jest.fn(() => of(customers));
+  customersService.load = vi.fn(() => of(customers)) as any;
 
   await render(CustomersComponent, {
     componentProviders: [

apps/example-app/src/app/examples/13-scrolling.component.spec.ts

@@ -1,3 +1,4 @@
+import { test, expect } from 'vitest';
 import { render, screen, waitForElementToBeRemoved } from '@testing-library/angular';
 
 import { CdkVirtualScrollOverviewExampleComponent } from './13-scrolling.component';