chore: switch to new storybook testing addon

Author: pmelab

packages/ui/.storybook/main.ts

@@ -30,10 +30,10 @@ const config: StorybookConfig = {
   addons: [
     getAbsolutePath('@storybook/addon-links'),
     getAbsolutePath('@storybook/addon-essentials'),
-    getAbsolutePath('@storybook/addon-interactions'),
     getAbsolutePath('@storybook/addon-coverage'),
-    // getAbsolutePath('@storybook/addon-a11y'),
+    getAbsolutePath('@storybook/addon-a11y'),
     getAbsolutePath('@storybook/addon-mdx-gfm'),
+    getAbsolutePath('@storybook/experimental-addon-test'),
   ],
   framework: {
     name: getAbsolutePath('@storybook/react-vite'),

packages/ui/.storybook/preview.tsx

@@ -39,7 +39,7 @@ declare global {
   }
 }
 
-const SWRCacheDecorator: Decorator = (Story) => {
+const SWRCacheDecorator: Decorator = (Story, context) => {
   const { cache } = useSWRConfig();
   for (const key of cache.keys()) {
     cache.delete(key);
@@ -52,10 +52,7 @@ const SWRCacheDecorator: Decorator = (Story) => {
             // eslint-disable-next-line react-hooks/rules-of-hooks
             return useSWR(
               // Make sure SWR caches are unique per story.
-              [
-                ...(key instanceof Array ? key : [key]),
-                window.__STORYBOOK_PREVIEW__.currentRender.id,
-              ],
+              [...(key instanceof Array ? key : [key]), context.id],
               fetcher,
               config,
             );
@@ -70,59 +67,6 @@ const SWRCacheDecorator: Decorator = (Story) => {
 
 export const parameters = {
   chromatic: { viewports: [320, 840, 1440] },
-  a11y: {
-    // Optional selector to inspect
-    element: '#storybook-root',
-    config: {
-      rules: [
-        {
-          // The autocomplete rule will not run based on the CSS selector provided
-          id: 'autocomplete-valid',
-          selector: '*:not([autocomplete="nope"])',
-        },
-        {
-          // Setting the enabled option to false will disable checks for this particular rule on all stories.
-          id: 'image-alt',
-          enabled: false,
-        },
-        {
-          // Setting the enabled option to false will disable checks for this particular rule on all stories.
-          id: 'color-contrast',
-          reviewOnFail: true,
-        },
-        {
-          id: 'link-name',
-          reviewOnFail: true,
-        },
-        {
-          id: 'duplicate-id',
-          reviewOnFail: true,
-        },
-        {
-          id: 'landmark-no-duplicate-main',
-          reviewOnFail: true,
-        },
-        {
-          id: 'landmark-main-is-top-level',
-          reviewOnFail: true,
-        },
-        {
-          id: 'landmark-unique',
-          reviewOnFail: true,
-        },
-        {
-          id: 'button-name',
-          reviewOnFail: true,
-        },
-        {
-          id: 'list',
-          reviewOnFail: true,
-        },
-      ],
-    },
-    // Axe's options parameter
-    options: {},
-  },
 };
 
 export const decorators = [

packages/ui/.storybook/test-runner.ts

@@ -0,0 +1,10 @@
+import { setProjectAnnotations } from '@storybook/react';
+import { beforeAll } from 'vitest';
+
+import * as projectAnnotations from './preview';
+
+// 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
+const project = setProjectAnnotations([projectAnnotations]);
+
+beforeAll(project.beforeAll);

packages/ui/.storybook/vitest.setup.ts

@@ -22,6 +22,7 @@
     }
   },
   "scripts": {
+    "playwright-install": "",
     "prep:types": "tsc --emitDeclarationOnly",
     "prep:scripts": "swc ./src -d ./build",
     "prep:fonts": "mkdir -p build && node preloaded-fonts.js",
@@ -33,9 +34,8 @@
     "dev": "storybook dev -p 6006 --no-open",
     "start": "serve storybook-static -p 6006 > /dev/null 2>&1",
     "test:static": "tsc --noEmit && eslint . --quiet",
-    "test:unit": "vitest run --passWithNoTests",
-    "test:storybook": "test-storybook --coverage",
-    "test:integration": "start-test start http://localhost:6006 test:storybook && pnpm report",
+    "test:unit": "vitest run --project=unit --passWithNoTests",
+    "test:integration": "playwright install chromium && vitest run --project=storybook --passWithNoTests",
     "report": "mkdir -p coverage/storybook && nyc report --reporter=lcov -t coverage/storybook --report-dir coverage/storybook"
   },
   "dependencies": {
@@ -72,10 +72,10 @@
     "@storybook/addon-actions": "^8.5.2",
     "@storybook/addon-coverage": "^1.0.5",
     "@storybook/addon-essentials": "^8.5.2",
-    "@storybook/addon-interactions": "^8.5.2",
     "@storybook/addon-links": "^8.5.2",
     "@storybook/addon-mdx-gfm": "^8.5.2",
     "@storybook/blocks": "^8.5.2",
+    "@storybook/experimental-addon-test": "^8.5.2",
     "@storybook/react": "^8.5.2",
     "@storybook/react-vite": "^8.5.2",
     "@storybook/test": "^8.5.2",
@@ -92,11 +92,13 @@
     "@types/react-body-classname": "^1.1.10",
     "@types/react-dom": "^18.2.18",
     "@vitejs/plugin-react-swc": "^3.5.0",
+    "@vitest/browser": "3.0.4",
+    "@vitest/coverage-v8": "3.0.4",
     "autoprefixer": "^10.4.16",
-    "axe-playwright": "^2.0.1",
     "cssnano": "^6.0.3",
     "happy-dom": "^12.10.3",
     "nyc": "^15.1.0",
+    "playwright": "^1.50.0",
     "postcss": "^8.4.32",
     "postcss-cli": "^11.0.0",
     "postcss-import": "^16.0.0",
@@ -111,6 +113,6 @@
     "typescript": "^5.3.3",
     "vite": "^5.0.10",
     "vite-imagetools": "^6.2.9",
-    "vitest": "^1.1.1"
+    "vitest": "^3.0.4"
   }
 }

packages/ui/package.json

@@ -0,0 +1,44 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';
+import { defineConfig } from 'vitest/config';
+
+const dirname =
+  typeof __dirname !== 'undefined'
+    ? __dirname
+    : path.dirname(fileURLToPath(import.meta.url));
+
+// More info at: https://storybook.js.org/docs/writing-tests/test-addon
+export default defineConfig({
+  test: {
+    workspace: [
+      {
+        test: {
+          name: 'unit',
+        },
+      },
+      {
+        plugins: [
+          // The plugin will run tests for the stories defined in your Storybook config
+          // See options at: https://storybook.js.org/docs/writing-tests/test-addon#storybooktest
+          storybookTest({ configDir: path.join(dirname, '.storybook') }),
+        ],
+        test: {
+          name: 'storybook',
+          browser: {
+            enabled: true,
+            headless: true,
+            provider: 'playwright',
+            instances: [
+              {
+                browser: 'chromium',
+              },
+            ],
+          },
+          setupFiles: ['.storybook/vitest.setup.ts'],
+        },
+      },
+    ],
+  },
+});

packages/ui/vitest.config.ts

@@ -0,0 +1 @@
+/// <reference types="@vitest/browser/providers/playwright" />