Merge pull request #29 from bartstc/chore/vitest-addon

chore: setup vitest addon

Author: bartstc

.github/workflows/ci.yml

@@ -55,11 +55,8 @@ jobs:
       - name: Install dependencies
         run: pnpm install --no-frozen-lockfile --ignore-scripts
 
-      - name: Run coverage
-        run: pnpm test:coverage
-
       - name: Run unit tests
-        run: pnpm test:ci
+        run: pnpm test:unit:ci
 
       - name: Upload test results
         if: success() || failure()
@@ -132,14 +129,8 @@ jobs:
         if: steps.playwright-cache.outputs.cache-hit != 'true'
         run: pnpm exec playwright install chromium --with-deps --only-shell
 
-      - name: Build Storybook
-        run: pnpm build-storybook --quiet
-
-      - name: Serve Storybook and run tests
-        run: |
-          pnpm exec concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
-            "pnpm exec http-server storybook-static --port 6006 --silent" \
-            "pnpm exec wait-on tcp:6006 && pnpm exec test-storybook --coverage --coverageDirectory=coverage --excludeTags=\"!test\" --junit --outputFile reports/storybook-report.json"
+      - name: Run storybook tests
+        run: pnpm test:storybook:ci
 
       - name: Upload test results
         if: success() || failure()

.storybook/main.ts

@@ -1,4 +1,3 @@
-import type { AddonOptionsVite } from "@storybook/addon-coverage";
 import type { StorybookConfig } from "@storybook/react-vite";
 import * as tsconfigPaths from "vite-tsconfig-paths";
 
@@ -7,18 +6,9 @@ const config: StorybookConfig = {
 
   addons: [
     "@storybook/addon-links",
-    "@storybook/addon-a11y",
     "storybook-addon-remix-react-router",
-    {
-      name: "@storybook/addon-coverage",
-      options: {
-        istanbul: {
-          include: ["src/**/*.tsx"],
-          exclude: ["src/**/*.ts", "src/test-lib/*.tsx"],
-        },
-      } satisfies AddonOptionsVite,
-    },
     "@storybook/addon-docs",
+    "@storybook/addon-vitest",
   ],
 
   framework: {

.storybook/preview.ts

@@ -14,7 +14,13 @@ export const parameters = {
       date: /Date$/,
     },
   },
-  a11y: { disable: true },
+  a11y: {
+    disable: true,
+    // 'todo' - show a11y violations in the test UI only
+    // 'error' - fail CI on a11y violations
+    // 'off' - skip a11y checks entirely
+    test: "todo",
+  },
 };
 
 initialize(

.storybook/test-runner.ts

@@ -0,0 +1,7 @@
+import { setProjectAnnotations } from "@storybook/react-vite";
+
+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
+setProjectAnnotations([projectAnnotations]);

.storybook/vitest.setup.ts

@@ -7,15 +7,15 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "test": "vitest",
-    "test:ci": "vitest run --reporter verbose --reporter=junit --outputFile=./reports/unit-report.xml --coverage --coverage.reporter=lcov --coverage.reportsDirectory=./coverage",
+    "test:unit": "vitest --project=unit",
+    "test:storybook": "vitest --project=storybook",
+    "test:unit:ci": "vitest run --project=\"unit\" --reporter verbose --reporter=junit --outputFile=./reports/unit-report.xml --coverage --coverage.reporter=lcov --coverage.reportsDirectory=./coverage",
+    "test:storybook:ci": "vitest run --project=\"storybook\" --reporter verbose --reporter=junit --outputFile=./reports/storybook-report.xml --coverage --coverage.reporter=lcov --coverage.reportsDirectory=./coverage",
     "test:coverage": "vitest run --coverage",
     "preview": "vite preview",
     "lint": "eslint . --ignore-pattern '*.d.ts' --report-unused-disable-directives --max-warnings 0",
     "prepare": "husky install",
-    "storybook": "storybook dev -p 6006",
-    "test-storybook": "test-storybook --watch",
-    "test-storybook:coverage": "test-storybook --coverage",
-    "build-storybook": "storybook build --test"
+    "storybook": "storybook dev -p 6006"
   },
   "dependencies": {
     "@chakra-ui/icons": "2.1.1",
@@ -31,7 +31,7 @@
     "i18next-localstorage-backend": "4.2.0",
     "ky": "0.33.3",
     "query-string": "8.2.0",
-    "ramda": "^0.31.3",
+    "ramda": "0.31.3",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-error-boundary": "3.1.4",
@@ -41,22 +41,19 @@
   },
   "devDependencies": {
     "@eslint/js": "9.24.0",
-    "@storybook/addon-a11y": "9.0.15",
-    "@storybook/addon-coverage": "2.0.0",
-    "@storybook/addon-docs": "9.0.15",
-    "@storybook/addon-links": "9.0.15",
-    "@storybook/react-vite": "9.0.15",
-    "@storybook/test-runner": "0.23.0",
+    "@storybook/addon-docs": "9.0.18",
+    "@storybook/addon-links": "9.0.18",
+    "@storybook/addon-vitest": "9.0.18",
+    "@storybook/react-vite": "9.0.18",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.0.0",
-    "@types/ramda": "^0.30.2",
+    "@types/ramda": "0.30.2",
     "@types/react": "19.1.8",
     "@types/react-dom": "19.1.6",
     "@types/testing-library__jest-dom": "5.14.9",
     "@vitejs/plugin-react-swc": "3.10.2",
+    "@vitest/browser": "3.2.4",
     "@vitest/coverage-istanbul": "3.2.4",
-    "axe-playwright": "2.1.0",
-    "concurrently": "8.2.0",
     "eslint": "9.24.0",
     "eslint-config-prettier": "10.1.2",
     "eslint-import-resolver-typescript": "4.3.2",
@@ -65,25 +62,23 @@
     "eslint-plugin-react": "7.37.5",
     "eslint-plugin-react-hooks": "5.2.0",
     "eslint-plugin-react-refresh": "0.4.19",
-    "eslint-plugin-storybook": "9.0.15",
+    "eslint-plugin-storybook": "9.0.18",
     "eslint-plugin-vitest": "0.5.4",
-    "http-server": "14.1.1",
     "husky": "8.0.3",
     "jsdom": "21.1.2",
-    "msw": "2.7.3",
-    "msw-storybook-addon": "2.0.4",
+    "msw": "2.10.4",
+    "msw-storybook-addon": "^2.0.5",
     "playwright": "1.52.0",
     "prettier": "3.5.3",
     "pretty-quick": "4.1.1",
-    "storybook": "9.0.15",
+    "storybook": "9.0.18",
     "storybook-addon-remix-react-router": "5.0.0",
     "typescript": "5.8.2",
     "typescript-eslint": "8.30.1",
     "vite": "7.0.5",
     "vite-plugin-checker": "0.10.1",
     "vite-tsconfig-paths": "5.1.4",
-    "vitest": "3.2.4",
-    "wait-on": "7.2.0"
+    "vitest": "3.2.4"
   },
   "browserslist": {
     "production": [