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>

.github/workflows/shared-component-visual-tests.yaml

@@ -54,11 +54,11 @@ jobs:
 
             - name: Run Visual tests
               working-directory: packages/shared-components
-              run: "yarn test:storybook:ci"
+              run: "yarn test:storybook --run"
 
             - name: Upload received images & diffs
               if: always()
               uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6
               with:
                   name: received-images
-                  path: packages/shared-components/playwright/shared-component-received
+                  path: packages/shared-components/__vis__/linux

.github/workflows/tests.yml

@@ -132,27 +132,34 @@ jobs:
               working-directory: "packages/shared-components"
               run: "yarn install"
 
-            - name: Jest Cache
+            - name: Cache storybook & vitest
               uses: actions/cache@8b402f58fbc84540c8b491a91e594a4576fec3d7 # v5
               with:
-                  path: /tmp/jest_cache
-                  key: ${{ hashFiles('**/yarn.lock') }}
+                  path: |
+                      packages/shared-components/node_modules/.cache
+                      packages/shared-components/node_modules/.vite/vitest
+                  key: ${{ hashFiles('packages/shared-components/yarn.lock') }}
 
-            - name: Get number of CPU cores
-              id: cpu-cores
-              uses: SimenB/github-actions-cpu-cores@97ba232459a8e02ff6121db9362b09661c875ab8 # v2
+            - name: Get installed Playwright version
+              working-directory: packages/shared-components
+              id: playwright
+              run: echo "version=$(yarn list --pattern @playwright/test --depth=0 --json --non-interactive --no-progress | jq -r '.data.trees[].name')" >> $GITHUB_OUTPUT
+
+            - name: Cache playwright binaries
+              uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5
+              id: playwright-cache
+              with:
+                  path: ~/.cache/ms-playwright
+                  key: ${{ runner.os }}-${{ runner.arch }}-playwright-${{ steps.playwright.outputs.version }}-onlyshell
+
+            - name: Install Playwright browsers
+              working-directory: packages/shared-components
+              if: steps.playwright-cache.outputs.cache-hit != 'true'
+              run: "yarn playwright install --with-deps --only-shell"
 
             - name: Run tests
               working-directory: "packages/shared-components"
-              run: |
-                  yarn test \
-                      --coverage=${{ env.ENABLE_COVERAGE }} \
-                      --ci \
-                      --max-workers ${{ steps.cpu-cores.outputs.count }} \
-                      --cacheDirectory /tmp/jest_cache
-              env:
-                  # tell jest to use coloured output
-                  FORCE_COLOR: true
+              run: yarn test:unit --coverage=${{ env.ENABLE_COVERAGE }}
 
             - name: Upload Artifact
               if: env.ENABLE_COVERAGE == 'true'

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"