final touches

package.json

@@ -105,10 +105,10 @@
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-storybook": "^0.8.0",
+    "happy-dom": "^14.12.3",
     "husky": ">=6",
     "istanbul": "^0.4.5",
     "jest-junit": "^16.0.0",
-    "jsdom": "^24.0.0",
     "lint-staged": ">=10",
     "msw": "^2.2.2",
     "msw-storybook-addon": "^2.0.2",
@@ -118,7 +118,6 @@
     "react-test-renderer": "^18.3.1",
     "storybook": "^8.3.0-alpha.6",
     "vite": "^5.0.0",
-    "vite-plugin-inspect": "^0.8.5",
     "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^4.3.2",
     "vitest": "^2.0.5",
@@ -137,4 +136,4 @@
   "resolutions": {
     "@use-it/event-listener@npm:^0.1.2": "patch:@use-it/event-listener@npm%3A0.1.7#~/.yarn/patches/@use-it-event-listener-npm-0.1.7-56ef42a654.patch"
   }
-}
+}

src/components/Button/Button.stories.tsx

@@ -1,4 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react'
+import { expect } from '@storybook/test'
 
 import { Button } from './Button'
 
@@ -25,6 +26,10 @@ export const Disabled: Story = {
   args: {
     disabled: true,
   },
+  play: async ({ canvas }) => {
+    const button = await canvas.findByRole('button')
+    await expect(button).toBeDisabled()
+  }
 }
 
 export const Clear: Story = {

src/pages/RestaurantDetailPage/RestaurantDetailPage.stories.tsx

@@ -48,15 +48,19 @@ export const Success = {
       ],
     },
   },
-}
+  play: async ({ canvas }) => {
+    const item = await canvas.findByText(/Burger Kingdom/i)
+    await expect(item).toBeInTheDocument()
+  },
+} satisfies Story
 
 export const WithModalOpen: Story = {
   ...Success,
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    const item = await canvas.findByText(/Cheeseburger/i)
+  play: async (context) => {
+    await Success.play(context)
+    const item = await context.canvas.findByText(/Cheeseburger/i)
     await userEvent.click(item)
-    await expect(canvas.getByTestId('modal')).toBeInTheDocument()
+    await expect(context.canvas.getByTestId('modal')).toBeInTheDocument()
   },
 }
 
@@ -83,8 +87,7 @@ export const Loading: Story = {
       ],
     },
   },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
+  play: async ({ canvas }) => {
     const item = await canvas.findByText(/Looking for some food.../i)
     await expect(item).toBeInTheDocument()
   },
@@ -104,8 +107,7 @@ export const NotFound: Story = {
       },
     },
   },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
+  play: async ({ canvas }) => {
     const item = await canvas.findByText(/We can't find this page/i)
     await expect(item).toBeInTheDocument()
   },
@@ -125,8 +127,7 @@ export const Error: Story = {
       ],
     },
   },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement)
+  play: async ({ canvas, step }) => {
     await step('Name of step', async () => {
       const item = await canvas.findByText(/Something went wrong!/i)
       await expect(item).toBeInTheDocument()

vitest.config.ts

@@ -2,7 +2,6 @@
 import { defineConfig } from 'vitest/config'
 import { mergeConfig } from 'vite'
 import { storybookTest } from '@storybook/experimental-addon-vitest/plugin'
-// import Inspect from 'vite-plugin-inspect'
 
 import viteConfig from './vite.config'
 
@@ -14,16 +13,10 @@ export default mergeConfig(
       storybookTest({
         storybookScript: 'yarn storybook --ci'
       }),
-      // Inspect({
-      //   build: true,
-      //   open: true,
-      //   include: [ '**/*.stories.*'],
-      //   dev: false,
-      // })
     ],
     publicDir: './public',
     test: {
-      environment: 'jsdom',
+      environment: 'happy-dom',
       setupFiles: './storybook.setup.ts',
       include: ['src/**/*.stories.*'],
       server: {
@@ -46,14 +39,3 @@ export default mergeConfig(
     },
   })
 )
-
-// isolate: true
-// Duration  8.15s (transform 12ms, setup 11.64s, collect 7.74s, tests 4.01s, environment 0ms, prepare 4.34s)
-// Duration  8.89s (transform 11ms, setup 14.32s, collect 8.70s, tests 4.20s, environment 0ms, prepare 4.59s)
-// Duration  9.99s (transform 13ms, setup 10.60s, collect 7.63s, tests 2.76s, environment 0ms, prepare 3.82s)
-// isolate: false
-// Duration  5.39s (transform 12ms, setup 4.31s, collect 8.12s, tests 4.03s, environment 0ms, prepare 2.30s)
-// Duration  7.90s (transform 12ms, setup 3.83s, collect 7.84s, tests 2.70s, environment 0ms, prepare 2.22s)
-// Duration  8.13s (transform 13ms, setup 4.40s, collect 8.93s, tests 2.77s, environment 0ms, prepare 2.44s)
-// isolate false with HMR
-// Duration  4.35s (transform 0ms, setup 3.86s, collect 3.71s, tests 4.39s, environment 0ms, prepare 2.25s)