Switch shared-components from jest & test-runner to vitest (#31800)

* Remove babel

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

* Remove duplicated patch-package dep

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

* Switch to @fetch-mock/vitest

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

* Update tests to import & call vitest functions

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

* Update test-utils imports

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

* Update unit test snapshots

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

* Switch from jest->vitest for unit tests

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

* Update visual test screenshots

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

* Switch from test-runner->vitest for visual tests

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

* Update README

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

* Update CI for shared-components unit & visual tests

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

* Update yarn.lock

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

* Update README

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

* Fix storybook trying to import vitest

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

* Fix css modules leaking between storybook tests

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

* Tweak screenshot update script to accept args

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

---------

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

packages/shared-components/.gitignore

@@ -0,0 +1,7 @@
+# Ignore test failure screenshots
+/src/**/__screenshots__/
+
+# Ignore vis diffs & local baseline
+/__vis__/**/__diffs__
+/__vis__/**/__results__
+/__vis__/local

packages/shared-components/.storybook/main.ts

@@ -9,13 +9,29 @@ import type { StorybookConfig } from "@storybook/react-vite";
 import fs from "node:fs";
 import { nodePolyfills } from "vite-plugin-node-polyfills";
 import { mergeConfig } from "vite";
+import { dirname } from "node:path";
+import { fileURLToPath } from "node:url";
 
 // Get a list of available languages so the language selector can display them at runtime
 const languages = fs.readdirSync("src/i18n/strings").map((f) => f.slice(0, -5));
 
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+    return dirname(fileURLToPath(import.meta.resolve(`${value}/package.json`)));
+}
+
 const config: StorybookConfig = {
     stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-    addons: ["@storybook/addon-docs", "@storybook/addon-designs", "@storybook/addon-a11y"],
+    addons: [
+        "@storybook/addon-docs",
+        "@storybook/addon-designs",
+        "@storybook/addon-a11y",
+        "@storybook/addon-vitest",
+        getAbsolutePath("storybook-addon-vis"),
+    ],
     framework: "@storybook/react-vite",
     core: {
         disableTelemetry: true,
@@ -27,7 +43,7 @@ const config: StorybookConfig = {
         return mergeConfig(config, {
             plugins: [
                 // Needed for counterpart to work
-                nodePolyfills({ include: ["util"] }),
+                nodePolyfills({ include: ["util"], globals: { global: false } }),
                 {
                     name: "language-middleware",
                     configureServer(server) {

packages/shared-components/.storybook/preview.tsx

@@ -80,7 +80,7 @@ const withI18nProvider: Decorator = (Story) => {
 };
 
 const preview: Preview = {
-    tags: ["autodocs"],
+    tags: ["autodocs", "snapshot"],
     decorators: [withThemeProvider, withTooltipProvider, withI18nProvider],
     parameters: {
         options: {

packages/shared-components/.storybook/test-runner.ts

@@ -1,34 +0,0 @@
-/*
-Copyright 2025 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { waitForPageReady, TestRunnerConfig } from "@storybook/test-runner";
-import { toMatchImageSnapshot } from "jest-image-snapshot";
-
-const customSnapshotsDir = `${process.cwd()}/playwright/snapshots/`;
-const customReceivedDir = `${process.cwd()}/playwright/received/`;
-
-const config: TestRunnerConfig = {
-    setup() {
-        expect.extend({ toMatchImageSnapshot });
-    },
-    async postVisit(page, context) {
-        await waitForPageReady(page);
-
-        // If you want to take screenshot of multiple browsers, use
-        // page.context().browser().browserType().name() to get the browser name to prefix the file name
-        const image = await page.screenshot({ animations: "disabled" });
-        expect(image).toMatchImageSnapshot({
-            customSnapshotsDir,
-            customSnapshotIdentifier: `${context.id}-${process.platform}`,
-            storeReceivedOnFailure: true,
-            customReceivedDir,
-            customDiffDir: customReceivedDir,
-        });
-    },
-};
-
-export default config;

packages/shared-components/.storybook/vitest.setup.ts

@@ -0,0 +1,36 @@
+/*
+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.
+*/
+
+import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
+import { setProjectAnnotations } from "@storybook/react-vite";
+import { vis, visAnnotations } from "storybook-addon-vis/vitest-setup";
+
+import * as projectAnnotations from "./preview.tsx";
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations, visAnnotations]);
+
+vis.setup({
+    async auto() {
+        const style = document.createElement("style");
+        style.setAttribute("type", "text/css");
+        style.appendChild(
+            document.createTextNode(`
+                /* Inhibit all animations for the screenshot to be more stable */
+                *, *::before, *::after {
+                    animation: none !important;
+                }
+                /* Hide all storybook elements */
+                .sb-wrapper {
+                    visibility: hidden !important;
+                }
+            `),
+        );
+        document.head.appendChild(style);
+    },
+});

packages/shared-components/README.md

@@ -261,25 +261,17 @@ Two types of tests are available: unit tests and visual regression tests.
 
 ### Unit Tests
 
-These tests cover the logic of the components and utilities. Built with Jest
+These tests cover the logic of the components and utilities. Built with Vitest
 and React Testing Library.
 
 ```bash
-yarn test
+yarn test:unit
 ```
 
 ### Visual Regression Tests
 
-These tests ensure the UI components render correctly. They need Storybook to
-be running and they will run in docker using [Playwright](../../playwright.md).
-
-First run storybook:
-
-```bash
-yarn storybook
-```
-
-Then, in another terminal, run:
+These tests ensure the UI components render correctly.
+Built with Storybook and run under vitest using playwright.
 
 ```bash
 yarn test:storybook:update

packages/shared-components/babel.config.cjs

@@ -1,21 +0,0 @@
-module.exports = {
-    sourceMaps: true,
-    presets: [
-        [
-            "@babel/preset-env",
-            {
-                include: ["@babel/plugin-transform-class-properties"],
-            },
-        ],
-        ["@babel/preset-typescript", { allowDeclareFields: true }],
-        "@babel/preset-react",
-    ],
-    plugins: [
-        "@babel/plugin-proposal-export-default-from",
-        "@babel/plugin-transform-numeric-separator",
-        "@babel/plugin-transform-object-rest-spread",
-        "@babel/plugin-transform-optional-chaining",
-        "@babel/plugin-transform-nullish-coalescing-operator",
-        "@babel/plugin-transform-runtime",
-    ],
-};

packages/shared-components/jest.config.ts

@@ -1,52 +0,0 @@
-/*
-Copyright 2025 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { env } from "process";
-
-import type { Config } from "jest";
-
-const config: Config = {
-    testEnvironment: "jest-fixed-jsdom",
-    testEnvironmentOptions: {
-        url: "http://localhost/",
-    },
-    testMatch: ["<rootDir>/src/**/*.test.[tj]s?(x)"],
-    setupFilesAfterEnv: ["<rootDir>/src/test/setupTests.ts"],
-    moduleNameMapper: {
-        // Support CSS module
-        "\\.(module.css)$": "identity-obj-proxy",
-        "\\.(css|scss|pcss)$": "<rootDir>/__mocks__/cssMock.js",
-        "\\.(gif|png|ttf|woff2)$": "<rootDir>/__mocks__/imageMock.js",
-        "\\.svg$": "<rootDir>/__mocks__/svg.js",
-        "^react$": "<rootDir>/node_modules/react",
-        "^react-dom$": "<rootDir>/node_modules/react-dom",
-        "waveWorker\\.min\\.js": "<rootDir>/__mocks__/empty.js",
-        "context-filter-polyfill": "<rootDir>/__mocks__/empty.js",
-        "workers/(.+)Factory": "<rootDir>/__mocks__/workerFactoryMock.js",
-    },
-    transformIgnorePatterns: [
-        "/node_modules/(?!(mime|matrix-js-sdk|uuid|p-retry|is-network-error|react-merge-refs|@storybook|storybook|matrix-web-i18n)).+$",
-    ],
-    collectCoverageFrom: [
-        "<rootDir>/src/**/*.{js,ts,tsx}",
-        "<rootDir>/packages/**/*.{js,ts,tsx}",
-        // Coverage chokes on type definition files
-        "!<rootDir>/src/**/*.d.ts",
-    ],
-    coverageReporters: ["text-summary", "lcov"],
-    testResultsProcessor: "@casualbot/jest-sonar-reporter",
-    prettierPath: null,
-    moduleDirectories: ["node_modules", "./src/test/utils"],
-};
-
-// if we're running under GHA, enable the GHA reporter
-if (env["GITHUB_ACTIONS"] !== undefined) {
-    const reporters: Config["reporters"] = [["github-actions", { silent: false }], "summary"];
-    config.reporters = reporters;
-}
-
-export default config;

packages/shared-components/package.json

@@ -38,16 +38,15 @@
         "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",
+        "test:storybook": "vitest --project=storybook",
+        "test:storybook:update": "playwright-screenshots --entrypoint /work/scripts/storybook-screenshot-update.sh --with-node-modules",
         "prepare": "patch-package && vite build",
         "storybook": "storybook dev -p 6007",
         "build-storybook": "storybook build",
         "lint": "yarn lint:types && yarn lint:js",
         "lint:js": "eslint --max-warnings 0 src && prettier --check .",
-        "lint:types": "tsc --noEmit && tsc --noEmit -p tsconfig.node.json",
-        "test:storybook": "test-storybook --url http://localhost:6007/",
-        "test:storybook:ci": "concurrently -k -s first -n \"SB,TEST\" \"yarn storybook --no-open\" \"wait-on tcp:6007 && yarn test-storybook --url http://localhost:6007/ --ci --maxWorkers=2\"",
-        "test:storybook:update": "playwright-screenshots --entrypoint /work/scripts/storybook-screenshot-update.sh --with-node-modules"
+        "lint:types": "tsc --noEmit && tsc --noEmit -p tsconfig.node.json"
     },
     "resolutions": {
         "playwright": "1.57.0"
@@ -59,45 +58,36 @@
         "counterpart": "^0.18.6",
         "lodash": "^4.17.21",
         "matrix-web-i18n": "3.6.0",
-        "patch-package": "^8.0.1",
         "react-merge-refs": "^3.0.2",
         "temporal-polyfill": "^0.3.0"
     },
     "devDependencies": {
-        "@babel/eslint-parser": "^7.28.6",
-        "@babel/eslint-plugin": "^7.27.1",
-        "@babel/plugin-proposal-export-default-from": "^7.27.1",
-        "@babel/plugin-transform-nullish-coalescing-operator": "^7.28.6",
-        "@babel/plugin-transform-numeric-separator": "^7.28.6",
-        "@babel/plugin-transform-object-rest-spread": "^7.28.6",
-        "@babel/plugin-transform-optional-chaining": "^7.28.6",
-        "@babel/plugin-transform-runtime": "^7.28.5",
-        "@babel/preset-env": "^7.28.6",
-        "@babel/preset-react": "^7.28.5",
-        "@babel/preset-typescript": "^7.28.5",
-        "@casualbot/jest-sonar-reporter": "^2.5.0",
         "@element-hq/element-web-playwright-common": "2.2.4",
-        "@fetch-mock/jest": "^0.2.20",
+        "@fetch-mock/vitest": "^0.2.18",
         "@matrix-org/react-sdk-module-api": "^2.5.0",
         "@playwright/test": "1.57.0",
         "@storybook/addon-a11y": "^10.0.7",
         "@storybook/addon-designs": "^11.0.1",
         "@storybook/addon-docs": "^10.0.7",
+        "@storybook/addon-vitest": "^10.1.11",
         "@storybook/icons": "^2.0.0",
         "@storybook/react-vite": "^10.0.7",
-        "@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",
         "@types/react": "^19.2.2",
         "@types/react-dom": "^19.2.3",
         "@typescript-eslint/eslint-plugin": "^8.53.1",
         "@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",
@@ -110,18 +100,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",
+        "storybook-addon-vis": "^3.1.2",
         "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/scripts/storybook-screenshot-update.sh

@@ -3,22 +3,9 @@
 # Update storybook screenshots
 #
 # This script should be used as the entrypoint parameter of the `playwright-screenshots` script. It
-# installs the yarn dependencies, and then runs `test-storybook` to update the storybook screenshots.
+# installs the yarn dependencies, and then runs `vitest --run --update --project=storybook` to update the storybook screenshots.
 #
-# It expects to find a storybook instance running at :6007 on the host machine. It also requires that
-# `playwright-screenshots` is given the `--with-node-modules` parameter.
-#
-# Example:
-#
-#        test-storybook --url http://localhost:6007/
-#        playwright-screenshots --entrypoint /work/scripts/storybook-screenshot-update.sh --with-node-modules
-#
-#
-# Note: even though this script is small, it is important because the alternative is running
-# `playwright-screenshots` twice in quick succession (once to do `yarn install`, a second to do the
-# actual updates): and that fails, because running `playwright-screenshots` without actually starting
-# Testcontainers leaves a ryuk container hanging around for up to 60s, which will block the second
-# invocation.
+# It requires that `playwright-screenshots` is given the `--with-node-modules` parameter.
 
 set -e
 
@@ -28,5 +15,5 @@ set -e
 # those on the host).
 yarn
 
-# Now run the screenshot update
-/work/node_modules/.bin/test-storybook --url http://host.docker.internal:6007/ --updateSnapshot
+# Now run the screenshot update, we set CI=1 to inform vis to update the real baselines
+CI=1 /work/node_modules/.bin/vitest --run --update --project=storybook "$@"

packages/shared-components/src/audio/AudioPlayerView/AudioPlayerView.test.tsx

@@ -5,11 +5,12 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import { render, screen } from "jest-matrix-react";
+import { render, screen } from "@test-utils";
 import { composeStories } from "@storybook/react-vite";
 import React from "react";
 import userEvent from "@testing-library/user-event";
 import { fireEvent } from "@testing-library/dom";
+import { describe, it, vi, afterEach, expect } from "vitest";
 
 import * as stories from "./AudioPlayerView.stories.tsx";
 import { AudioPlayerView, type AudioPlayerViewActions, type AudioPlayerViewSnapshot } from "./AudioPlayerView";
@@ -21,7 +22,7 @@ const { Default, NoMediaName, NoSize, HasError } = composeStories(stories);
 
 describe("AudioPlayerView", () => {
     afterEach(() => {
-        jest.clearAllMocks();
+        vi.clearAllMocks();
     });
 
     it("renders the audio player in default state", () => {
@@ -44,9 +45,9 @@ describe("AudioPlayerView", () => {
         expect(container).toMatchSnapshot();
     });
 
-    const onKeyDown = jest.fn();
-    const togglePlay = jest.fn();
-    const onSeekbarChange = jest.fn();
+    const onKeyDown = vi.fn();
+    const togglePlay = vi.fn();
+    const onSeekbarChange = vi.fn();
 
     class AudioPlayerViewModel extends MockViewModel<AudioPlayerViewSnapshot> implements AudioPlayerViewActions {
         public onKeyDown = onKeyDown;