test: ✅ upgrade vitest to v4

Author: yjaaidi

apps/101-meal-planner-solution/src/test-setup-common.ts

@@ -1,7 +1,10 @@
+import './styles.css';
 import '@testing-library/jest-dom';
-import './test-setup-common';
+import { setUpTestBed } from './testing/set-up-test-bed';
 
 const originalItTodo = it.todo.bind(it);
 /* Strip extra arguments to align with vitest and avoid the following error:
  * "todo must be called with only a description." */
 it.todo = (name: string) => originalItTodo(name);
+
+setUpTestBed();

apps/101-meal-planner-solution/src/test-setup-jest.ts

@@ -1,24 +1,5 @@
+import './styles.css';
 import '@testing-library/jest-dom/vitest';
-import './test-setup-common';
+import { setUpTestBed } from './testing/set-up-test-bed';
 
-/**
- * When using `forks` or `threads` pools, Vitest does not override the global `window`,
- * Therefore, when Angular CDK harness creates an event using `window` as the view,
- * the `window` reference is different from jsdom's, and this causes the following error:
- *   TypeError: Failed to construct 'KeyboardEvent': member view is not of type Window.
- *
- * The workaround is to override the `window` global variable.
- * This only fixes code that uses `window` but not code using `globalThis`.
- *
- * @see https://github.com/angular/components/blob/3c84525dd23cfb20691ae07e4e39caa36c354af4/src/cdk/testing/testbed/fake-events/event-objects.ts#L142
- * @see https://github.com/vitest-dev/vitest/issues/4685
- */
-beforeEach(() => {
-  if (g.jsdom && g.jsdom.window !== g.window) {
-    vi.spyOn(g, 'window', 'get').mockImplementation(() => g.jsdom.window);
-  }
-});
-
-const g = globalThis as unknown as typeof globalThis & {
-  jsdom: { window: Window & typeof globalThis };
-};
+setUpTestBed();

apps/101-meal-planner-solution/src/test-setup.ts

@@ -0,0 +1,37 @@
+import { NgModule, provideZonelessChangeDetection } from '@angular/core';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserTestingModule,
+  platformBrowserTesting,
+} from '@angular/platform-browser/testing';
+
+declare global {
+  const DEBUG_BROWSER: boolean | undefined;
+}
+
+export function setUpTestBed() {
+  /* When debugging in the browser, we want to prevent Angular Testing Library
+   * and TestBed from cleaning up after the test in order to interact with the browser.
+   * Therefore, we disable Angular Testing Library clean up and forward the DEBUG_BROWSER
+   * environment variable to move TestBed cleanup from afterEach to beforeEach. */
+  const isDebugBrowserMode =
+    typeof DEBUG_BROWSER !== 'undefined' && DEBUG_BROWSER;
+  const lifecycleHook = isDebugBrowserMode ? beforeEach : afterEach;
+  lifecycleHook(() => getTestBed().resetTestingModule());
+
+  const testBed = getTestBed();
+  if (testBed.platform) {
+    return;
+  }
+
+  @NgModule({ providers: [provideZonelessChangeDetection()] })
+  class TestModule {}
+
+  testBed.initTestEnvironment(
+    [BrowserTestingModule, TestModule],
+    platformBrowserTesting(),
+    {
+      teardown: { destroyAfterEach: false },
+    },
+  );
+}

apps/101-meal-planner-solution/src/testing/set-up-test-bed.ts

@@ -0,0 +1,23 @@
+import { defineConfig, mergeConfig } from 'vitest/config';
+
+export default mergeConfig(
+  defineConfig({
+    define: {
+      /* When debugging in the browser, we want to prevent TestBed from cleaning up after
+       * the test and we don't want Angular Testing Library to interfere. */
+      'process.env.ATL_SKIP_AUTO_CLEANUP': 'true',
+    },
+  }),
+  defineConfig(
+    process.env.DEBUG_BROWSER != null
+      ? {
+          /* When debugging in the browser, we want to prevent TestBed from cleaning up after
+           * the test in order to interact with the browser.
+           * Therefore, we forward the DEBUG_BROWSER environment variable to move TestBed cleanup
+           * from afterEach to beforeEach. */
+          define: { DEBUG_BROWSER: true },
+          test: { fileParallelism: false },
+        }
+      : {},
+  ),
+);

apps/101-meal-planner-solution/vitest-angular-preset.ts

@@ -1,23 +1,14 @@
+import { playwright } from '@vitest/browser-playwright';
 import { defineConfig, mergeConfig } from 'vitest/config';
 import viteConfig from './vite.config.mjs';
+import vitestAngularPreset from './vitest-angular-preset';
 
 const testPatterns = ['src/**/*.spec.ts'];
 const browserTestPatterns = ['src/**/*.browser.spec.ts'];
 
 export default mergeConfig(
-  viteConfig,
+  mergeConfig(viteConfig, vitestAngularPreset),
   defineConfig({
-    /* When debugging in the browser, we want to prevent Angular Testing Library
-     * and TestBed from cleaning up after the test in order to interact with the browser.
-     * Therefore, we disable Angular Testing Library clean up and forward the DEBUG_BROWSER
-     * environment variable to move TestBed cleanup from afterEach to beforeEach. */
-    define:
-      process.env.DEBUG_BROWSER != null
-        ? {
-            'process.env.ATL_SKIP_AUTO_CLEANUP': 'true',
-            'process.env.DEBUG_BROWSER': 'true',
-          }
-        : {},
     test: {
       globals: true,
       setupFiles: ['src/test-setup.ts'],
@@ -28,6 +19,7 @@ export default mergeConfig(
       },
       watch: false,
       pool: 'threads',
+      isolate: false,
       projects: [
         {
           extends: true,
@@ -45,7 +37,7 @@ export default mergeConfig(
             include: browserTestPatterns,
             browser: {
               enabled: true,
-              provider: 'playwright',
+              provider: playwright(),
               instances: [{ browser: 'chromium' }],
             },
           },

apps/101-meal-planner-solution/vitest.config.mts

@@ -1,7 +1,10 @@
+import './styles.css';
 import '@testing-library/jest-dom';
-import './test-setup-common';
+import { setUpTestBed } from './testing/set-up-test-bed';
 
 const originalItTodo = it.todo.bind(it);
 /* Strip extra arguments to align with vitest and avoid the following error:
  * "todo must be called with only a description." */
 it.todo = (name: string) => originalItTodo(name);
+
+setUpTestBed();

apps/101-meal-planner-starter/src/test-setup-common.ts

@@ -1,24 +1,5 @@
+import './styles.css';
 import '@testing-library/jest-dom/vitest';
-import './test-setup-common';
+import { setUpTestBed } from './testing/set-up-test-bed';
 
-/**
- * When using `forks` or `threads` pools, Vitest does not override the global `window`,
- * Therefore, when Angular CDK harness creates an event using `window` as the view,
- * the `window` reference is different from jsdom's, and this causes the following error:
- *   TypeError: Failed to construct 'KeyboardEvent': member view is not of type Window.
- *
- * The workaround is to override the `window` global variable.
- * This only fixes code that uses `window` but not code using `globalThis`.
- *
- * @see https://github.com/angular/components/blob/3c84525dd23cfb20691ae07e4e39caa36c354af4/src/cdk/testing/testbed/fake-events/event-objects.ts#L142
- * @see https://github.com/vitest-dev/vitest/issues/4685
- */
-beforeEach(() => {
-  if (g.jsdom && g.jsdom.window !== g.window) {
-    vi.spyOn(g, 'window', 'get').mockImplementation(() => g.jsdom.window);
-  }
-});
-
-const g = globalThis as unknown as typeof globalThis & {
-  jsdom: { window: Window & typeof globalThis };
-};
+setUpTestBed();

apps/101-meal-planner-starter/src/test-setup-jest.ts

@@ -0,0 +1,37 @@
+import { NgModule, provideZonelessChangeDetection } from '@angular/core';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserTestingModule,
+  platformBrowserTesting,
+} from '@angular/platform-browser/testing';
+
+declare global {
+  const DEBUG_BROWSER: boolean | undefined;
+}
+
+export function setUpTestBed() {
+  /* When debugging in the browser, we want to prevent Angular Testing Library
+   * and TestBed from cleaning up after the test in order to interact with the browser.
+   * Therefore, we disable Angular Testing Library clean up and forward the DEBUG_BROWSER
+   * environment variable to move TestBed cleanup from afterEach to beforeEach. */
+  const isDebugBrowserMode =
+    typeof DEBUG_BROWSER !== 'undefined' && DEBUG_BROWSER;
+  const lifecycleHook = isDebugBrowserMode ? beforeEach : afterEach;
+  lifecycleHook(() => getTestBed().resetTestingModule());
+
+  const testBed = getTestBed();
+  if (testBed.platform) {
+    return;
+  }
+
+  @NgModule({ providers: [provideZonelessChangeDetection()] })
+  class TestModule {}
+
+  testBed.initTestEnvironment(
+    [BrowserTestingModule, TestModule],
+    platformBrowserTesting(),
+    {
+      teardown: { destroyAfterEach: false },
+    },
+  );
+}