Switch jest->vitest

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

packages/shared-components/.gitignore

@@ -0,0 +1,2 @@
+# Ignore test failure screenshots
+/src/**/__screenshots__/

packages/shared-components/package.json

@@ -38,7 +38,7 @@
         "i18n": "matrix-gen-i18n src && yarn i18n:sort && yarn i18n:lint",
         "i18n:sort": "matrix-sort-i18n src/i18n/strings/en_EN.json",
         "i18n:lint": "matrix-i18n-lint && prettier --log-level=silent --write src/i18n/strings/ --ignore-path /dev/null",
-        "test": "jest",
+        "test:unit": "vitest --project=unit",
         "prepare": "patch-package && vite build",
         "storybook": "storybook dev -p 6007",
         "build-storybook": "storybook build",
@@ -63,7 +63,6 @@
         "temporal-polyfill": "^0.3.0"
     },
     "devDependencies": {
-        "@casualbot/jest-sonar-reporter": "^2.5.0",
         "@element-hq/element-web-playwright-common": "2.2.4",
         "@fetch-mock/vitest": "^0.2.18",
         "@matrix-org/react-sdk-module-api": "^2.5.0",
@@ -76,7 +75,9 @@
         "@storybook/test-runner": "^0.24.1",
         "@stylistic/eslint-plugin": "^5.7.0",
         "@testing-library/dom": "^10.4.1",
-        "@testing-library/react": "^16.3.0",
+        "@testing-library/jest-dom": "^6.9.1",
+        "@testing-library/react": "^16.3.2",
+        "@testing-library/user-event": "^14.6.1",
         "@types/counterpart": "^0.18.4",
         "@types/jest-image-snapshot": "^6.4.0",
         "@types/lodash": "^4.17.20",
@@ -86,6 +87,10 @@
         "@typescript-eslint/parser": "^8.53.1",
         "@vector-im/compound-web": "^8.3.5",
         "concurrently": "^9.2.1",
+        "@vitejs/plugin-react": "^5.1.2",
+        "@vitest/browser-playwright": "^4.0.17",
+        "@vitest/coverage-v8": "^4.0.17",
+        "@vitest/ui": "^4.0.17",
         "eslint": "8",
         "eslint-config-google": "^0.14.0",
         "eslint-config-prettier": "^10.1.8",
@@ -98,18 +103,17 @@
         "eslint-plugin-react-hooks": "^7.0.1",
         "eslint-plugin-storybook": "^10.0.7",
         "eslint-plugin-unicorn": "^56.0.0",
-        "identity-obj-proxy": "^3.0.0",
-        "jest": "^30.2.0",
-        "jest-environment-jsdom": "^30.2.0",
-        "jest-fixed-jsdom": "^0.0.11",
         "jest-image-snapshot": "^6.5.1",
         "patch-package": "^8.0.1",
         "prettier": "^3.6.2",
         "storybook": "^10.0.7",
         "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.3.1",
         "vite-plugin-dts": "^4.5.4",
-        "vite-plugin-node-polyfills": "^0.25.0"
+        "vite-plugin-node-polyfills": "^0.25.0",
+        "vitest": "^4.0.17",
+        "vitest-browser-react": "^2.0.2",
+        "vitest-sonar-reporter": "^3.0.0"
     },
     "engines": {
         "node": ">=20.0.0"

packages/shared-components/src/test/setupTests.ts

@@ -5,13 +5,14 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import "@testing-library/vitest";
-import fetchMock from "@fetch-mock/jest";
+import fetchMock from "@fetch-mock/vitest";
+import { cleanup } from "@test-utils";
+import { afterEach } from "vitest";
 
 import { setLanguage } from "../../src/utils/i18n";
 import en from "../i18n/strings/en_EN.json";
 
-export function setupLanguageMock(): void {
+function setupLanguageMock(): void {
     fetchMock
         .get("end:/i18n/languages.json", {
             en: "en_EN.json",
@@ -22,3 +23,7 @@ setupLanguageMock();
 fetchMock.mockGlobal();
 
 setLanguage("en");
+
+afterEach(() => {
+    cleanup();
+});

packages/shared-components/tsconfig.json

@@ -14,9 +14,10 @@
         "declaration": true,
         "jsx": "react",
         "lib": ["es2022", "es2024.promise", "dom", "dom.iterable"],
+        "types": [],
         "strict": true,
         "paths": {
-            "jest-matrix-react": ["./src/test/utils/jest-matrix-react"]
+            "@test-utils": ["./src/test/utils/index"]
         }
     },
     "include": ["./src/**/*.ts", "./src/**/*.tsx", ".storybook/*.ts", ".storybook/*.tsx"],

packages/shared-components/tsconfig.node.json

@@ -9,5 +9,5 @@
         "types": [],
         "allowSyntheticDefaultImports": true
     },
-    "include": ["vite.config.ts"]
+    "include": ["vite.config.ts", "vitest.config.ts"]
 }

packages/shared-components/vitest.config.ts

@@ -0,0 +1,101 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+/// <reference types="@vitest/browser-playwright" />
+
+import { defineConfig } from "vitest/config";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { playwright } from "@vitest/browser-playwright";
+import { nodePolyfills } from "vite-plugin-node-polyfills";
+import { InlineConfig } from "vite";
+import { Reporter } from "vitest/reporters";
+import { env } from "process";
+
+const reporters: NonNullable<InlineConfig["test"]>["reporters"] = [["default"]];
+const slowTestReporter: Reporter = {
+    onTestRunEnd(testModules, unhandledErrors, reason) {
+        const tests = testModules
+            .flatMap((m) => Array.from(m.children.allTests()))
+            .filter((test) => test.diagnostic()?.slow);
+        tests.sort((x, y) => x.diagnostic()?.duration! - y.diagnostic()?.duration!);
+        tests.reverse();
+        if (tests.length > 0) {
+            console.warn("Slowest 10 tests:");
+        }
+        for (const t of tests.slice(0, 10)) {
+            console.warn(`${t.module.moduleId} > ${t.fullName}: ${t.diagnostic()?.duration.toFixed(0)}ms`);
+        }
+    },
+};
+
+// if we're running under GHA, enable the GHA & Sonar reporters
+if (env["GITHUB_ACTIONS"] !== undefined) {
+    reporters.push([
+        "github-actions",
+        {
+            silent: false,
+        },
+    ]);
+
+    reporters.push([
+        "vitest-sonar-reporter",
+        {
+            outputFile: "coverage/sonar-report.xml",
+            onWritePath: (path) => `packages/shared-components/${path}`,
+        },
+    ]);
+
+    // if we're running against the develop branch, also enable the slow test reporter
+    if (env["GITHUB_REF"] == "refs/heads/develop") {
+        reporters.push(slowTestReporter);
+    }
+}
+
+export default defineConfig({
+    css: {
+        modules: {
+            // Stabilise snapshots by stripping the hash component of the CSS module class name
+            generateScopedName: (name) => name,
+        },
+    },
+    test: {
+        coverage: {
+            provider: "v8",
+            include: ["src/**/*.{ts,tsx}"],
+            exclude: ["src/**/*.stories.tsx"],
+            reporter: [["lcov", { projectRoot: "../../" }]],
+        },
+        reporters,
+        globals: false,
+        pool: "threads",
+        projects: [
+            {
+                extends: true,
+                plugins: [nodePolyfills({ include: ["util"], globals: { global: false } })],
+                test: {
+                    name: "unit",
+                    browser: {
+                        enabled: true,
+                        headless: true,
+                        provider: playwright({}),
+                        instances: [{ browser: "chromium" }],
+                    },
+                    setupFiles: ["src/test/setupTests.ts"],
+                },
+            },
+        ],
+    },
+    optimizeDeps: {
+        include: ["vite-plugin-node-polyfills/shims/buffer", "vite-plugin-node-polyfills/shims/process"],
+    },
+    resolve: {
+        alias: {
+            "@test-utils": path.resolve(__dirname, "./src/test/utils/index.tsx"),
+        },
+    },
+});