Setup experimental vite coverage addon

.eslintrc.js

@@ -1,4 +1,4 @@
-export default {
+module.exports = {
   env: {
     browser: true,
     es2021: true,

.storybook/main.ts

@@ -2,18 +2,18 @@ import { StorybookConfig } from '@storybook/react-vite'
 
 const config: StorybookConfig = {
   stories: [
-    '../src/docs/Introduction.mdx',
-    '../src/docs/*.mdx',
-    '../src/**/*.mdx',
+    // '../src/docs/Introduction.mdx',
+    // '../src/docs/*.mdx',
+    // '../src/**/*.mdx',
     '../src/**/*.stories.@(js|jsx|ts|tsx)',
   ],
   addons: [
-    '@chromatic-com/storybook',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
-    '@storybook/addon-a11y',
-    '@storybook/addon-coverage',
-    '@storybook/addon-designs',
+    // '@chromatic-com/storybook',
+    // '@storybook/addon-essentials',
+    // '@storybook/addon-interactions',
+    // '@storybook/addon-a11y',
+    // '@storybook/addon-designs',
+    '@storybook/experimental-addon-coverage'
   ],
   typescript: {
     reactDocgen: 'react-docgen',

.storybook/vitest.config.ts

@@ -0,0 +1,34 @@
+import { defineProject, mergeConfig } from 'vitest/config';
+import { storybookTest } from '@storybook/experimental-addon-vitest/plugin';
+import viteConfig from '../vite.config'
+
+export default mergeConfig(
+    viteConfig,
+  defineProject({
+    plugins: [
+        storybookTest({
+          configDir: '../.storybook',
+          storybookScript: 'yarn storybook --ci'
+        }),
+      ],
+
+      publicDir: '../public',
+    test: {
+        environment: 'happy-dom',
+        setupFiles: './vitest.setup.ts',
+        include: ['../src/**/*.stories.*'],
+        server: {
+            deps: {
+            inline: ['vitest-canvas-mock'],
+            },
+        },
+        browser: {
+            enabled: true,
+            provider: 'playwright',
+            name: 'chromium',
+            headless: true,
+            screenshotFailures: false,
+        }
+    },
+  })
+);

storybook.setup.ts → .storybook/vitest.setup.ts

@@ -6,6 +6,6 @@ if(!globalThis.__vitest_browser__) {
 }
 
 import { setProjectAnnotations } from '@storybook/react'
-import storybookAnnotations from './.storybook/preview'
+import storybookAnnotations from './preview'
 
 setProjectAnnotations([storybookAnnotations])

.vscode/settings.json

@@ -12,5 +12,8 @@
     "titleBar.inactiveBackground": "#50b1b6c0",
     "titleBar.activeForeground": "#F6FCEE"
   },
-  "deepscan.ignoreConfirmWarning": true
+  "deepscan.ignoreConfirmWarning": true,
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
 }

package.json

@@ -59,21 +59,22 @@
     "@babel/core": "^7.14.6",
     "@chromatic-com/storybook": "1.6.2--canary.df0b83c.0",
     "@ladle/react": "^4.0.3",
-    "@storybook/addon-a11y": "^8.3.0-alpha.6",
+    "@storybook/addon-a11y": "0.0.0-pr-28882-sha-a04fe375",
     "@storybook/addon-coverage": "^1.0.4",
     "@storybook/addon-designs": "^8.0.3",
-    "@storybook/addon-essentials": "^8.3.0-alpha.6",
-    "@storybook/addon-interactions": "^8.3.0-alpha.6",
-    "@storybook/addon-themes": "^8.3.0-alpha.6",
-    "@storybook/blocks": "^8.3.0-alpha.6",
-    "@storybook/experimental-addon-vitest": "^8.3.0-alpha.6",
+    "@storybook/addon-essentials": "0.0.0-pr-28882-sha-a04fe375",
+    "@storybook/addon-interactions": "0.0.0-pr-28882-sha-a04fe375",
+    "@storybook/addon-themes": "0.0.0-pr-28882-sha-a04fe375",
+    "@storybook/blocks": "0.0.0-pr-28882-sha-a04fe375",
+    "@storybook/experimental-addon-coverage": "0.0.0-pr-28882-sha-a04fe375",
+    "@storybook/experimental-addon-vitest": "0.0.0-pr-28882-sha-a04fe375",
     "@storybook/experimental-vitest-plugin": "^0.0.4",
-    "@storybook/manager-api": "^8.3.0-alpha.6",
-    "@storybook/react": "^8.3.0-alpha.6",
-    "@storybook/react-vite": "^8.3.0-alpha.6",
-    "@storybook/test": "^8.3.0-alpha.6",
+    "@storybook/manager-api": "0.0.0-pr-28882-sha-a04fe375",
+    "@storybook/react": "0.0.0-pr-28882-sha-a04fe375",
+    "@storybook/react-vite": "0.0.0-pr-28882-sha-a04fe375",
+    "@storybook/test": "0.0.0-pr-28882-sha-a04fe375",
     "@storybook/test-runner": "^0.19.0",
-    "@storybook/theming": "^8.3.0-alpha.6",
+    "@storybook/theming": "0.0.0-pr-28882-sha-a04fe375",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
@@ -88,8 +89,10 @@
     "@typescript-eslint/eslint-plugin": "^7.8.0",
     "@typescript-eslint/parser": "^7.8.0",
     "@vitejs/plugin-react": "^4.2.1",
-    "@vitest/browser": "^2.0.5",
-    "@vitest/coverage-istanbul": "^2.0.5",
+    "@vitest/browser": "2.1.0-beta.6",
+    "@vitest/coverage-istanbul": "2.1.0-beta.6",
+    "@vitest/coverage-v8": "2.1.0-beta.6",
+    "@vitest/ui": "2.1.0-beta.6",
     "babel-loader": "8.1.0",
     "babel-plugin-istanbul": "^6.1.1",
     "babel-plugin-open-source": "^1.3.3",
@@ -105,7 +108,7 @@
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-storybook": "^0.8.0",
-    "happy-dom": "^14.12.3",
+    "happy-dom": "^15.0.0",
     "husky": ">=6",
     "istanbul": "^0.4.5",
     "jest-junit": "^16.0.0",
@@ -116,11 +119,11 @@
     "prettier": "^3.2.5",
     "react-is": "^18.3.1",
     "react-test-renderer": "^18.3.1",
-    "storybook": "^8.3.0-alpha.6",
-    "vite": "^4.0.0",
+    "storybook": "0.0.0-pr-28882-sha-a04fe375",
+    "vite": "^5.4.2",
     "vite-plugin-svgr": "^4.2.0",
-    "vite-tsconfig-paths": "^4.3.2",
-    "vitest": "^2.0.5",
+    "vite-tsconfig-paths": "^5.0.1",
+    "vitest": "2.1.0-beta.6",
     "vitest-axe": "^0.1.0",
     "vitest-canvas-mock": "^0.3.3",
     "wait-on": "^7.2.0"

public/mockServiceWorker.js

@@ -8,7 +8,7 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.3.4'
+const PACKAGE_VERSION = '2.3.5'
 const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()

src/api/index.ts

@@ -10,7 +10,10 @@ interface BaseApi {
 
 export const BASE_URL = 'https://mealdrop.netlify.app/.netlify/functions/restaurants'
 
-const isMockedEnvironment = !!import.meta.env.STORYBOOK || import.meta.env.NODE_ENV === 'test' || (globalThis as any).__vitest_browser__
+const isMockedEnvironment =
+  !!import.meta.env.STORYBOOK ||
+  import.meta.env.NODE_ENV === 'test' ||
+  (globalThis as any).__vitest_browser__
 
 const apiCache = new Map()
 

src/components/Button/Button.stories.tsx

@@ -29,7 +29,7 @@ export const Disabled: Story = {
   play: async ({ canvas }) => {
     const button = await canvas.findByRole('button')
     await expect(button).toBeDisabled()
-  }
+  },
 }
 
 export const Clear: Story = {

src/components/forms/Input.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
+import { fn } from '@storybook/test'
 
 import { Input } from './Input'
-import { fn } from '@storybook/test'
 
 const meta = {
   title: 'Components/Form/Input',

vitest.workspace.ts

@@ -0,0 +1,5 @@
+import { defineWorkspace } from 'vitest/config';
+
+export default defineWorkspace([
+  '.storybook/vitest.config.ts',
+]);