Consolidate vitest CI & coverage (#33808)

* Consolidate modules vitest coverage * Use vite-common as base for modules vitest config * Make knip happier * Fix coverage paths * Place modules unit tests alongside src * Switch to defineProject for better type safety * Consolidate vitest CI & coverage Kills off vite-common * Update comment * Update lockfile * Fix shared-components vitest config * Soften eslint config for tests in modules * Run eslint on modules/playwright dir too * Make tsc happy
2026-06-10 16:00:34 +00:00
parent 042ded86c7
commit e9a89d9872
34 changed files with 252 additions and 301 deletions
@@ -37,14 +37,12 @@
        "coverage:diff": "diff-cover --config-file ../../diff-cover.toml coverage/lcov.info"
    },
    "devDependencies": {
-        "@element-hq/vite-common": "workspace:*",
        "@matrix-org/react-sdk-module-api": "^2.5.0",
        "@microsoft/api-extractor": "^7.49.1",
        "@types/node": "^22.10.7",
        "@types/react": "catalog:",
        "@types/react-dom": "catalog:",
        "@types/semver": "^7.5.8",
-        "@vitest/coverage-v8": "catalog:",
        "matrix-widget-api": "^1.17.0",
        "rollup-plugin-external-globals": "^0.13.0",
        "semver": "^7.6.3",
@@ -7,43 +7,38 @@ Please see LICENSE files in the repository root for full details.

 import { dirname, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
-import { defineConfig, mergeConfig } from "vitest/config";
+import { defineConfig } from "vitest/config";
 import dts from "unplugin-dts/vite";
 import externalGlobals from "rollup-plugin-external-globals";
-import baseConfig from "@element-hq/vite-common/vite.config";

 import packageJson from "./package.json" with { type: "json" };

 const __dirname = dirname(fileURLToPath(import.meta.url));

-export default mergeConfig(
-    baseConfig,
-    defineConfig({
-        build: {
-            lib: {
-                entry: resolve(__dirname, "src/index.ts"),
-                name: "element-web-plugin-engine",
-                fileName: "element-web-plugin-engine",
-            },
-            outDir: "lib",
-            target: "esnext",
-            sourcemap: true,
+export default defineConfig({
+    build: {
+        lib: {
+            entry: resolve(__dirname, "src/index.ts"),
+            name: "element-web-plugin-engine",
+            fileName: "element-web-plugin-engine",
        },
-        plugins: [
-            dts(),
-            externalGlobals({
-                // Reuse React from the host app
-                react: "window.React",
-            }),
-        ],
-        define: {
-            // We cannot use `process.env.npm_package_version` as when building element-web with module-api set to `workspace`
-            // this would contain the version of element-web rather than that of the module-api.
-            __VERSION__: JSON.stringify(packageJson.version),
-            // Use production mode for the build as it is tested against production builds of Element Web,
-            // this is required for React JSX versions to be compatible.
-            process: { env: { NODE_ENV: "production" } },
-        },
-    }),
-    true,
-);
+        outDir: "lib",
+        target: "esnext",
+        sourcemap: true,
+    },
+    plugins: [
+        dts(),
+        externalGlobals({
+            // Reuse React from the host app
+            react: "window.React",
+        }),
+    ],
+    define: {
+        // We cannot use `process.env.npm_package_version` as when building element-web with module-api set to `workspace`
+        // this would contain the version of element-web rather than that of the module-api.
+        __VERSION__: JSON.stringify(packageJson.version),
+        // Use production mode for the build as it is tested against production builds of Element Web,
+        // this is required for React JSX versions to be compatible.
+        process: { env: { NODE_ENV: "production" } },
+    },
+});
@@ -0,0 +1,20 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { defineProject } from "vitest/config";
+
+import viteConfig from "./vite.config";
+
+export default defineProject({
+    test: {
+        environment: "node",
+        pool: "threads",
+        globals: false,
+        include: ["src/**/*.test.{ts,tsx}"],
+    },
+    define: viteConfig.define,
+});
@@ -87,7 +87,6 @@
    },
    "devDependencies": {
        "@element-hq/element-web-playwright-common": "workspace:*",
-        "@element-hq/vite-common": "workspace:*",
        "@fetch-mock/vitest": "^0.2.18",
        "@fontsource/inter": "catalog:",
        "@matrix-org/react-sdk-module-api": "^2.5.0",
@@ -111,7 +110,6 @@
        "@typescript-eslint/parser": "^8.53.1",
        "@vector-im/compound-web": "catalog:",
        "@vitest/browser-playwright": "catalog:",
-        "@vitest/coverage-v8": "catalog:",
        "eslint": "8",
        "eslint-config-google": "^0.14.0",
        "eslint-config-prettier": "^10.1.8",
@@ -9,5 +9,5 @@
        "types": [],
        "allowSyntheticDefaultImports": true
    },
-    "include": ["vite.config.ts", "vitest.config.ts"]
+    "include": ["vite.config.ts", "vitest.config.ts", "../../vitest.config.ts"]
 }
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */

-import { defineConfig, mergeConfig } from "vitest/config";
+import { defineConfig } from "vitest/config";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 import { storybookTest } from "@storybook/addon-vitest/vitest-plugin";
@@ -13,7 +13,7 @@ import { storybookVis } from "storybook-addon-vis/vitest-plugin";
 import { playwright, PlaywrightProviderOptions } from "@vitest/browser-playwright";
 import { nodePolyfills } from "vite-plugin-node-polyfills";

-import baseConfig from "@element-hq/vite-common/vite.config";
+import rootConfig from "../../vitest.config";

 const dirname = typeof __dirname !== "undefined" ? __dirname : path.dirname(fileURLToPath(import.meta.url));

@@ -30,94 +30,97 @@ const commonLaunchOptions = {
    args: ["--font-render-hinting=none", "--disable-font-subpixel-positioning", "--disable-lcd-text"],
 };

-export default mergeConfig(
-    baseConfig,
-    defineConfig({
-        test: {
-            coverage: {
-                exclude: ["src/**/*.stories.tsx"],
-            },
-            projects: [
-                {
-                    extends: true,
-                    plugins: [
-                        // The plugin will run tests for the stories defined in your Storybook config
-                        // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-                        storybookTest({
-                            configDir: path.join(dirname, ".storybook"),
-                            storybookScript: "storybook --ci",
-                            tags: {
-                                exclude: ["skip-test"],
-                            },
-                        }),
-                        storybookVis({
-                            // 3px of difference allowed before marking as failed
-                            failureThreshold: 3,
-                            // When running in CI=1 mode, set the platform to `linux` as that is the platform where the browser-in-docker is running
-                            snapshotRootDir: ({ ci, platform }) => `__vis__/${ci ? "linux" : platform}`,
-                        }),
-                    ],
-                    test: {
-                        name: "storybook",
-                        browser: {
-                            enabled: true,
-                            headless: true,
-                            provider: playwright({
-                                contextOptions: commonContextOptions,
-                                launchOptions: commonLaunchOptions,
-                                connectOptions: process.env.PW_TEST_CONNECT_WS_ENDPOINT
-                                    ? {
-                                          wsEndpoint: process.env.PW_TEST_CONNECT_WS_ENDPOINT,
-                                          exposeNetwork: "<loopback>",
-                                      }
-                                    : undefined,
-                            }),
-                            instances: [{ browser: "chromium" }],
+export default defineConfig({
+    test: {
+        coverage: {
+            exclude: ["src/**/*.stories.tsx"],
+            provider: "v8",
+            include: ["src/**/*.{ts,tsx}"],
+            reporter: [["lcov", { projectRoot: "../../" }]],
+        },
+        reporters: rootConfig.test?.reporters,
+        environment: "node",
+        pool: "threads",
+        globals: false,
+        projects: [
+            {
+                extends: true,
+                plugins: [
+                    // The plugin will run tests for the stories defined in your Storybook config
+                    // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+                    storybookTest({
+                        configDir: path.join(dirname, ".storybook"),
+                        storybookScript: "storybook --ci",
+                        tags: {
+                            exclude: ["skip-test"],
                        },
-                        setupFiles: [".storybook/vitest.setup.ts"],
+                    }),
+                    storybookVis({
+                        // 3px of difference allowed before marking as failed
+                        failureThreshold: 3,
+                        // When running in CI=1 mode, set the platform to `linux` as that is the platform where the browser-in-docker is running
+                        snapshotRootDir: ({ ci, platform }) => `__vis__/${ci ? "linux" : platform}`,
+                    }),
+                ],
+                test: {
+                    name: "storybook",
+                    browser: {
+                        enabled: true,
+                        headless: true,
+                        provider: playwright({
+                            contextOptions: commonContextOptions,
+                            launchOptions: commonLaunchOptions,
+                            connectOptions: process.env.PW_TEST_CONNECT_WS_ENDPOINT
+                                ? {
+                                      wsEndpoint: process.env.PW_TEST_CONNECT_WS_ENDPOINT,
+                                      exposeNetwork: "<loopback>",
+                                  }
+                                : undefined,
+                        }),
+                        instances: [{ browser: "chromium" }],
+                    },
+                    setupFiles: [".storybook/vitest.setup.ts"],
+                },
+            },
+            {
+                extends: true,
+                // as any is workaround for https://github.com/davidmyersdev/vite-plugin-node-polyfills/issues/150
+                plugins: [nodePolyfills({ include: ["util"], globals: { global: false } }) as any],
+                test: {
+                    name: "unit",
+                    browser: {
+                        enabled: true,
+                        headless: true,
+                        provider: playwright({
+                            // These tests don't actually take screenshots (at least at time of writing)
+                            // but let's pass these options everywhere for consistency
+                            contextOptions: commonContextOptions,
+                            launchOptions: commonLaunchOptions,
+                        }),
+                        instances: [{ browser: "chromium" }],
+                    },
+                    setupFiles: ["src/test/setupTests.ts"],
+                },
+                css: {
+                    modules: {
+                        // Stabilise snapshots while keeping names distinct across CSS modules.
+                        generateScopedName: "[name]_[local]",
                    },
                },
-                {
-                    extends: true,
-                    // as any is workaround for https://github.com/davidmyersdev/vite-plugin-node-polyfills/issues/150
-                    plugins: [nodePolyfills({ include: ["util"], globals: { global: false } }) as any],
-                    test: {
-                        name: "unit",
-                        browser: {
-                            enabled: true,
-                            headless: true,
-                            provider: playwright({
-                                // These tests don't actually take screenshots (at least at time of writing)
-                                // but let's pass these options everywhere for consistency
-                                contextOptions: commonContextOptions,
-                                launchOptions: commonLaunchOptions,
-                            }),
-                            instances: [{ browser: "chromium" }],
-                        },
-                        setupFiles: ["src/test/setupTests.ts"],
-                    },
-                    css: {
-                        modules: {
-                            // Stabilise snapshots while keeping names distinct across CSS modules.
-                            generateScopedName: "[name]_[local]",
-                        },
-                    },
-                },
-            ],
-        },
-        optimizeDeps: {
-            include: [
-                "vite-plugin-node-polyfills/shims/buffer",
-                "vite-plugin-node-polyfills/shims/process",
-                "@vector-im/compound-design-tokens/assets/web/icons",
-                "storybook/preview-api",
-            ],
-        },
-        resolve: {
-            alias: {
-                "@test-utils": path.resolve(__dirname, "./src/test/utils/index.tsx"),
            },
+        ],
+    },
+    optimizeDeps: {
+        include: [
+            "vite-plugin-node-polyfills/shims/buffer",
+            "vite-plugin-node-polyfills/shims/process",
+            "@vector-im/compound-design-tokens/assets/web/icons",
+            "storybook/preview-api",
+        ],
+    },
+    resolve: {
+        alias: {
+            "@test-utils": path.resolve(__dirname, "./src/test/utils/index.tsx"),
        },
-    }),
-    true,
-);
+    },
+});
@@ -1,18 +0,0 @@
-{
-    "name": "@element-hq/vite-common",
-    "private": true,
-    "version": "0.0.0",
-    "type": "module",
-    "scripts": {
-        "lint:types": "tsc --noEmit"
-    },
-    "dependencies": {
-        "vitest": "catalog:"
-    },
-    "devDependencies": {
-        "typescript": "catalog:"
-    },
-    "peerDependencies": {
-        "@vitest/coverage-v8": "catalog:"
-    }
-}
@@ -1,9 +0,0 @@
-{
-    "compilerOptions": {
-        "target": "ESNext",
-        "module": "esnext",
-        "moduleResolution": "bundler",
-        "strict": true
-    },
-    "include": ["vite.config.ts"]
-}
@@ -1,54 +0,0 @@
-/*
-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 { defineConfig, type ViteUserConfig } from "vitest/config";
-import { type Reporter } from "vitest/node";
-import { env } from "node:process";
-
-const reporters: NonNullable<ViteUserConfig["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 }]);
-
-    // 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({
-    test: {
-        coverage: {
-            provider: "v8",
-            include: ["src/**/*.{ts,tsx}"],
-            reporter: [["lcov", { projectRoot: "../../" }]],
-        },
-        environment: "node",
-        reporters,
-        pool: "threads",
-        globals: false,
-        include: ["src/**/*.test.{ts,tsx}"],
-    },
-});