Use Storybook 10's test syntax features

.storybook/main.ts

@@ -1,6 +1,5 @@
-import { StorybookConfig } from '@storybook/react-vite'
-
-const config: StorybookConfig = {
+import { defineMain } from '@storybook/react-vite/node'
+export default defineMain({
   stories: [
     '../src/docs/Introduction.mdx',
     '../src/docs/*.mdx',
@@ -11,13 +10,15 @@ const config: StorybookConfig = {
     '@storybook/addon-vitest',
     '@storybook/addon-a11y',
     // TODO: this addon has a bad instrumentation of getConfig.asyncWrapper that should be fixed
-    'storybook-addon-test-codegen',
+    // 'storybook-addon-test-codegen',
     '@storybook/addon-docs',
   ],
   typescript: {
     reactDocgen: 'react-docgen',
   },
   staticDirs: ['../public'],
   framework: '@storybook/react-vite',
-}
-export default config
+  features: {
+    experimentalTestSyntax: true,
+  },
+})

.storybook/preview.tsx

@@ -1,10 +1,11 @@
-import type { Preview } from '@storybook/react-vite'
 import { INITIAL_VIEWPORTS } from 'storybook/viewport'
-import { userEvent } from '@testing-library/user-event'
 import { mswLoader, initialize } from 'msw-storybook-addon'
 import { DocsContainer, DocsContainerProps } from '@storybook/addon-docs/blocks'
-import { Decorator } from '@storybook/react-vite'
+import { definePreview } from '@storybook/react-vite'
 import { configureStore } from '@reduxjs/toolkit'
+import addonA11y from '@storybook/addon-a11y'
+import addonVitest from '@storybook/addon-vitest'
+import addonDocs from '@storybook/addon-docs'
 import { Provider as StoreProvider } from 'react-redux'
 import { BrowserRouter } from 'react-router-dom'
 import React from 'react'
@@ -15,6 +16,10 @@
 import { breakpoints } from '../src/styles/breakpoints'
 import { GlobalStyle } from '../src/styles/GlobalStyle'
 import { darkTheme, lightTheme } from '../src/styles/theme'
+import { DecoratorFunction } from 'storybook/internal/csf'
+import { sb } from 'storybook/test'
+
+sb.mock('../src/helpers/getCurrency.ts', { spy: true })
 
 initialize({
   quiet: true,
@@ -52,7 +57,7 @@
   `
 )
 
-export const withTheme: Decorator = (
+export const withTheme: DecoratorFunction = (
   StoryFn,
   { globals: { theme = 'light' }, parameters, viewMode }
 ) => {
@@ -148,7 +153,7 @@
  *   }
  * };
  */
-export const withStore: Decorator = (StoryFn, { parameters }) => {
+export const withStore: DecoratorFunction = (StoryFn, { parameters }) => {
   // Creates a store by merging optional custom initialState
   const store = configureStore({
     reducer: rootReducer,
@@ -175,7 +180,7 @@
  *   }
  * };
  */
-export const withRouter: Decorator = (StoryFn, { parameters: { deeplink } }) => {
+export const withRouter: DecoratorFunction = (StoryFn, { parameters: { deeplink } }) => {
   // if there's a deeplink, routing will be handled in another decorator
   if (deeplink) {
     return <StoryFn />
@@ -206,10 +211,10 @@
   {} as typeof INITIAL_VIEWPORTS
 )
 
-const preview: Preview = {
+export default definePreview({
   parameters: {
     viewport: {
-      viewports: {
+      options: {
         ...breakpointViewports,
         ...INITIAL_VIEWPORTS,
       },
@@ -252,11 +257,5 @@
   },
   decorators: [withRouter, withTheme, withStore],
   loaders: [mswLoader, demoModeLoader],
-}
-
-declare module 'storybook/internal/csf' {
-  interface StoryContext {
-    userEvent: ReturnType<typeof userEvent.setup>
-  }
-}
-export default preview
+  addons: [addonDocs(), addonA11y(), addonVitest()],
+})

package.json

@@ -42,6 +42,15 @@
     ]
   },
   "resolutions": {
+    "node-fetch": "^3",
+    "jest": "^30",
+    "jest-circus": "^30",
+    "jest-environment-node": "^30",
+    "jest-junit": "^16.0.0",
+    "jest-playwright-preset": "^4.0.0",
+    "jest-runner": "^30",
+    "jest-serializer-html": "^7.1.0",
+    "jest-watch-typeahead": "^3.0.1",
     "@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"
   },
   "dependencies": {
@@ -66,16 +75,16 @@
   },
   "devDependencies": {
     "@babel/core": "^7.26.9",
-    "@chromatic-com/storybook": "4.0.0",
+    "@chromatic-com/storybook": "4.1.3-next.0",
     "@eslint/js": "^9.21.0",
-    "@storybook/addon-a11y": "^9.0.9",
-    "@storybook/addon-coverage": "^2.0.0",
-    "@storybook/addon-designs": "10.0.1",
-    "@storybook/addon-docs": "^9.0.9",
-    "@storybook/addon-themes": "^9.0.9",
-    "@storybook/addon-vitest": "^9.0.9",
-    "@storybook/react-vite": "^9.0.9",
-    "@storybook/test-runner": "^0.23.0",
+    "@storybook/addon-a11y": "10.2.0-alpha.18",
+    "@storybook/addon-coverage": "^3.0.0",
+    "@storybook/addon-designs": "^11.0.0-next.0",
+    "@storybook/addon-docs": "10.2.0-alpha.18",
+    "@storybook/addon-themes": "10.2.0-alpha.18",
+    "@storybook/addon-vitest": "10.2.0-alpha.18",
+    "@storybook/react-vite": "10.2.0-alpha.18",
+    "@storybook/test-runner": "0.24.2-next.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.6.1",
@@ -92,6 +101,7 @@
     "@vitejs/plugin-react": "^4.3.4",
     "@vitest/browser": "^3.0.7",
     "@vitest/coverage-v8": "^3.0.7",
+    "babel-jest": "^30.0.2",
     "babel-loader": "8.4.1",
     "babel-plugin-istanbul": "^6.1.1",
     "babel-plugin-open-source": "^1.3.4",
@@ -103,7 +113,7 @@
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-prettier": "^5.2.3",
     "eslint-plugin-react": "^7.37.4",
-    "eslint-plugin-storybook": "^9.0.9",
+    "eslint-plugin-storybook": "10.2.0-alpha.18",
     "eslint-plugin-unicorn": "^57.0.0",
     "globals": "^16.0.0",
     "happy-dom": "^17.1.8",
@@ -112,13 +122,13 @@
     "jest-junit": "^16.0.0",
     "lint-staged": "^15.4.3",
     "msw": "^2.7.3",
-    "msw-storybook-addon": "^2.0.5",
+    "msw-storybook-addon": "^2.0.6",
     "playwright": "^1.50.1",
     "prettier": "^3.5.2",
     "react-is": "^19.0.0",
     "react-test-renderer": "^19.0.0",
-    "storybook": "^9.0.9",
-    "storybook-addon-test-codegen": "^2.0.1",
+    "storybook": "10.2.0-alpha.18",
+    "storybook-addon-test-codegen": "^3.0.1",
     "typescript-eslint": "^8.25.0",
     "vite": "^6.2.0",
     "vitest": "^3.0.7",
@@ -129,5 +139,14 @@
   "packageManager": "yarn@4.2.1",
   "msw": {
     "workerDirectory": "public"
+  },
+  "imports": {
+    "#*": [
+      "./*",
+      "./*.ts",
+      "./*.tsx",
+      "./*.js",
+      "./*.jsx"
+    ]
   }
 }

src/components/AnimatedIllustration/AnimatedIllustration.stories.tsx

@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 
 import { AnimatedIllustration } from './AnimatedIllustration'
 
-const meta = {
+const meta = preview.meta({
   title: 'Components/AnimatedIllustration',
   component: AnimatedIllustration,
   parameters: {
@@ -17,19 +17,16 @@ const meta = {
       </div>
     ),
   ],
-} satisfies Meta<typeof AnimatedIllustration>
+})
 
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const NotFound: Story = {
+export const NotFound = meta.story({
   args: {
     animation: 'NotFound',
   },
-}
+})
 
-export const Error: Story = {
+export const Error = meta.story({
   args: {
     animation: 'Error',
   },
-}
+})

src/components/Badge/Badge.stories.tsx

@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 
 import { Badge } from './Badge'
 
-const meta = {
+const meta = preview.meta({
   title: 'Components/Badge',
   component: Badge,
   parameters: {
@@ -11,13 +11,10 @@ const meta = {
       url: 'https://www.figma.com/file/XW4Bcjmj3JOILjKmZjjdQd/Mealdrop?node-id=780%3A2938',
     },
   },
-} satisfies Meta<typeof Badge>
+})
 
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
+export const Default = meta.story({
   args: {
     text: 'Comfort food',
   },
-}
+})

src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -1,27 +1,24 @@
-import { Meta, StoryObj } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 
 import { Breadcrumb } from './Breadcrumb'
 
-const meta: Meta<typeof Breadcrumb> = {
+const meta = preview.meta({
   title: 'Components/Breadcrumb',
   component: Breadcrumb,
-}
+})
 
-export default meta
-type Story = StoryObj<typeof Breadcrumb>
-
-export const SingleItem: Story = {
+export const SingleItem = meta.story({
   args: {
     items: [{ label: 'categories' }],
   },
-}
+})
 
-export const MultipleItems: Story = {
+export const MultipleItems = meta.story({
   args: {
     items: [
       { label: 'home', path: '/' },
       { label: 'categories', path: '/categories' },
       { label: 'sushi' },
     ],
   },
-}
+})

src/components/Button/Button.stories.tsx

@@ -1,9 +1,9 @@
-import type { StoryObj, Meta } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 import { expect } from 'storybook/test'
 
 import { Button } from './Button'
 
-const meta = {
+const meta = preview.meta({
   title: 'Components/Button',
   component: Button,
   args: {
@@ -15,37 +15,34 @@ const meta = {
       url: 'https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?node-id=1005%3A2974&t=8pzYUq8GyzmMGjJ2-4',
     },
   },
-} satisfies Meta<typeof Button>
-export default meta
+})
 
-type Story = StoryObj<typeof meta>
+export const Default = meta.story({})
 
-export const Default: Story = {}
-
-export const Disabled: Story = {
+export const Disabled = meta.story({
   args: {
     disabled: true,
   },
-  play: async ({ canvas }) => {
-    const button = await canvas.findByRole('button')
-    await expect(button).toBeDisabled()
-  },
-}
+})
+Disabled.test('should be disabled', async (context) => {
+  const button = await context.canvas.findByRole('button')
+  await expect(button).toBeDisabled()
+})
 
-export const Clear: Story = {
+export const Clear = meta.story({
   args: {
     clear: true,
   },
-}
+})
 
-export const Icon: Story = {
+export const Icon = meta.story({
   args: {
     icon: 'cart',
     'aria-label': 'cart',
   },
-}
+})
 
-export const IconAndText: Story = {
+export const IconAndText = meta.story({
   args: {
     icon: 'cart',
     children: (
@@ -55,4 +52,4 @@ export const IconAndText: Story = {
       </div>
     ),
   },
-}
+})

src/components/Category/Category.stories.tsx

@@ -1,8 +1,8 @@
-import type { StoryObj, Meta } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 
 import { Category } from './Category'
 
-const meta = {
+const meta = preview.meta({
   title: 'Components/Category',
   component: Category,
   args: {
@@ -17,15 +17,12 @@ const meta = {
       url: 'https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?type=design&node-id=1145-3681&mode=design&t=zmyrZnTzOLfLqBwr-4',
     },
   },
-} satisfies Meta<typeof Category>
-export default meta
+})
 
-type Story = StoryObj<typeof meta>
+export const Default = meta.story({})
 
-export const Default: Story = {}
-
-export const Rounded: Story = {
+export const Rounded = meta.story({
   args: {
     round: true,
   },
-}
+})