Adapt new module mocking

.storybook/main.ts

@@ -1,17 +1,17 @@
-import type { StorybookConfig } from '@storybook/experimental-nextjs-vite'
+import type { StorybookConfig } from '@storybook/nextjs-vite'
 import { mergeConfig } from 'vite'
 import * as path from 'path'
 
 const config: StorybookConfig = {
   stories: ['../docs/**/*.mdx', '../**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
-    '@storybook/addon-essentials',
-    '@storybook/experimental-addon-test',
+    '@storybook/addon-vitest',
     '@storybook/addon-a11y',
     '@chromatic-com/storybook',
+    '@storybook/addon-docs'
   ],
   framework: {
-    name: '@storybook/experimental-nextjs-vite',
+    name: '@storybook/nextjs-vite',
     options: {},
   },
   features: {

.storybook/preview.tsx

@@ -2,11 +2,16 @@ import '../app/style.css'
 import type { Preview } from '@storybook/react'
 import { initialize, mswLoader } from 'msw-storybook-addon'
 import * as MockDate from 'mockdate'
-import { initializeDB } from '#lib/db.mock'
-import { userEvent } from '@storybook/test'
+import { initializeDB } from '../lib/__mocks__/db'
+import { sb, userEvent } from 'storybook/test'
 initialize({ onUnhandledRequest: 'bypass', quiet: true })
 
-import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport'
+sb.mock('../app/actions', {spy: true});
+sb.mock('../lib/db', {spy: true});
+sb.mock('../lib/session', {spy: true});
+sb.mock('../lib/sanitize-html', {spy: true});
+
+import { MINIMAL_VIEWPORTS } from 'storybook/viewport'
 
 const preview: Preview = {
   parameters: {
@@ -50,7 +55,7 @@ const preview: Preview = {
   },
 }
 
-declare module '@storybook/csf' {
+declare module 'storybook/internal/csf' {
   interface StoryContext {
     userEvent: ReturnType<typeof userEvent.setup>
   }

.storybook/vitest.setup.ts

@@ -1,6 +1,6 @@
 import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
 import { beforeAll } from 'vitest'
-import { setProjectAnnotations } from '@storybook/experimental-nextjs-vite'
+import { setProjectAnnotations } from '@storybook/nextjs-vite'
 import * as projectAnnotations from './preview'
 import './a11y.vitest.setup'
 

app/note/[id]/page.stories.tsx

@@ -1,12 +1,12 @@
 import { type Meta, type StoryObj } from '@storybook/react'
 import { cookies } from '@storybook/nextjs/headers.mock'
 import { http } from 'msw'
-import { expect } from '@storybook/test'
+import { expect, mocked } from 'storybook/test'
 import Page from './page'
-import { db, initializeDB } from '#lib/db.mock'
+import { db, initializeDB } from '#lib/__mocks__/db'
 import { createUserCookie, userCookieKey } from '#lib/session'
 import { PageDecorator } from '#.storybook/decorators'
-import { login } from '#app/actions.mock'
+import { login } from '#app/actions'
 import * as auth from '#app/auth/route'
 import { expectRedirect } from '#lib/test-utils'
 import NoteSkeleton from '#app/note/[id]/loading'
@@ -65,7 +65,7 @@ export const LoginShouldGetOAuthTokenAndSetCookie: Story = {
   },
   play: async ({ mount, userEvent }) => {
     // Point the login implementation to the endpoint github would have redirected too.
-    login.mockImplementation(async () => {
+    mocked(login).mockImplementation(async () => {
       return await auth.GET(new Request('/auth?code=storybookjs'))
     })
     const canvas = await mount()

app/note/edit/[id]/page.stories.tsx

@@ -1,4 +1,4 @@
-import { expect } from '@storybook/test'
+import { expect } from 'storybook/test'
 import { type Meta, type StoryObj } from '@storybook/react'
 import { cookies } from '@storybook/nextjs/headers.mock'
 import Page from './page'

app/note/edit/page.stories.tsx

@@ -1,4 +1,4 @@
-import { expect } from '@storybook/test'
+import { expect } from 'storybook/test'
 import { type Meta, type StoryObj } from '@storybook/react'
 import { cookies } from '@storybook/nextjs/headers.mock'
 import Page from './page'

components/auth-button.stories.tsx

@@ -1,6 +1,7 @@
 import { type Meta, type StoryObj } from '@storybook/react'
 import AuthButton from './auth-button'
-import { getUserFromSession } from '#lib/session.mock'
+import { getUserFromSession } from '#lib/session'
+import { mocked } from 'storybook/test'
 
 const meta = {
   component: AuthButton,
@@ -16,7 +17,7 @@ type Story = StoryObj<typeof meta>
 
 export const LoggedIn: Story = {
   beforeEach: () => {
-    getUserFromSession.mockResolvedValue('storybookjs')
+    mocked(getUserFromSession).mockResolvedValue('storybookjs')
   },
   args: { children: 'Add' },
 }

components/logout-button.stories.tsx

@@ -1,13 +1,18 @@
 import { type Meta, type StoryObj } from '@storybook/react'
 import LogoutButton from './logout-button'
-import { cookies } from '@storybook/nextjs/headers.mock'
-import { createUserCookie, userCookieKey } from '#lib/session'
+import { getUserFromSession } from '#lib/session'
+import { mocked } from 'storybook/test'
 
 const meta = {
   component: LogoutButton,
-  parameters: { backgrounds: { default: 'dark' }, react: { rsc: true } },
+  parameters: { react: { rsc: true } },
+  globals: {
+    // 👇 Set background value for all component stories
+    backgrounds: { value: 'dark' },
+  },
   async beforeEach() {
-    cookies().set(userCookieKey, await createUserCookie('storybookjs'))
+    mocked(getUserFromSession).mockResolvedValue('storybookjs')
+
   },
 } satisfies Meta<typeof LogoutButton>
 

components/logout-button.tsx

@@ -2,8 +2,11 @@ import { logout } from '#app/actions'
 import { getUserFromSession } from '#lib/session'
 
 export default async function LogoutButton() {
+  console.log('LogoutButton')
   const user = await getUserFromSession()
 
+  console.log('user', user)
+
   return (
     user && (
       <form action={logout}>

components/note-ui.stories.tsx

@@ -1,17 +1,17 @@
-import { expect } from '@storybook/test'
+import { expect, mocked } from 'storybook/test'
 import { type Meta, type StoryObj } from '@storybook/react'
-import { deleteNote, saveNote } from '#app/actions.mock'
+import { deleteNote, saveNote } from '#app/actions'
 import NoteUI from '#components/note-ui'
 import { createNotes } from '#mocks/notes'
-import { getUserFromSession } from '#lib/session.mock'
+import { getUserFromSession } from '#lib/session'
 
 const meta = {
   component: NoteUI,
   parameters: { react: { rsc: true } },
   async beforeEach() {
-    getUserFromSession.mockResolvedValue('storybookjs')
-    saveNote.mockImplementation(async () => {})
-    deleteNote.mockImplementation(async () => {})
+    mocked(getUserFromSession).mockResolvedValue('storybookjs')
+    mocked(saveNote).mockImplementation(async () => {})
+    mocked(deleteNote).mockImplementation(async () => {})
   },
 } satisfies Meta<typeof NoteUI>
 

components/search.stories.tsx

@@ -1,7 +1,7 @@
 import { getRouter } from '@storybook/nextjs/navigation.mock'
 import { type Meta, type StoryObj } from '@storybook/react'
 import Search from './search'
-import { expect, fireEvent } from '@storybook/test'
+import { expect, fireEvent } from 'storybook/test'
 
 const meta = {
   component: Search,

components/sidebar.stories.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
 import Sidebar from './sidebar'
 import { createNotes } from '#mocks/notes'
-import { expect, waitFor } from '@storybook/test'
+import { expect, waitFor } from 'storybook/test'
 
 const meta = {
   component: Sidebar,

docs/Welcome.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks'
+import { Meta } from '@storybook/addon-docs/blocks'
 import Image from 'next/image'
 
 import Github from './assets/github.svg'

lib/db.mock.ts → lib/__mocks__/db.ts

@@ -1,5 +1,5 @@
 import { Prisma, type PrismaClient } from '@prisma/client'
-import { fn, isMockFunction } from '@storybook/test'
+import { fn, isMockFunction } from 'storybook/test'
 import createPrismaMock from 'prisma-mock'
 import json from '#prisma/dmmf.json'
 

lib/test-utils.ts

@@ -1,4 +1,4 @@
-import { expect, waitFor } from '@storybook/test'
+import { expect, waitFor } from 'storybook/test'
 import { getRouter } from '@storybook/nextjs/navigation.mock'
 
 export const expectRedirect = async (url: string) => {

package.json

@@ -4,22 +4,6 @@
     "node": ">=20"
   },
   "imports": {
-    "#app/actions": {
-      "storybook": "./app/actions.mock.ts",
-      "default": "./app/actions.ts"
-    },
-    "#lib/session": {
-      "storybook": "./lib/session.mock.ts",
-      "default": "./lib/session.ts"
-    },
-    "#lib/db": {
-      "storybook": "./lib/db.mock.ts",
-      "default": "./lib/db.ts"
-    },
-    "#lib/sanitize-html": {
-      "storybook": "./lib/sanitize-html.mock.ts",
-      "default": "./lib/sanitize-html.ts"
-    },
     "#*": [
       "./*",
       "./*.ts",
@@ -57,52 +41,50 @@
     "sanitize-html": "^2.13.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.6",
+    "@chromatic-com/storybook": "^4.0.1",
     "@prisma/client": "^5.11.0",
-    "@storybook/addon-a11y": "^8.6.11",
-    "@storybook/addon-essentials": "^8.6.11",
-    "@storybook/addon-viewport": "^8.6.11",
-    "@storybook/blocks": "^8.6.11",
-    "@storybook/csf": "^0.1.13",
-    "@storybook/experimental-addon-test": "^8.6.11",
-    "@storybook/experimental-nextjs-vite": "^8.6.11",
-    "@storybook/react": "^8.6.11",
-    "@storybook/test": "^8.6.11",
+    "@storybook/addon-a11y": "0.0.0-pr-31987-sha-5b4f0632",
+    "@storybook/react": "0.0.0-pr-31987-sha-5b4f0632",
     "@total-typescript/tsconfig": "^1.0.4",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@types/sanitize-html": "^2.11.0",
     "@ungap/with-resolvers": "^0.1.0",
-    "@vitest/browser": "^2.1.8",
-    "@vitest/coverage-istanbul": "^2.1.8",
-    "@vitest/ui": "^2.1.8",
+    "@vitest/browser": "^3.0.0",
+    "@vitest/mocker": "^3.0.0",
+    "@vitest/spy": "^3.0.0",
+    "@vitest/coverage-istanbul": "^3.0.0",
+    "@vitest/ui": "^3.0.0",
     "axe-core": "^4.10.0",
     "chromatic": "^11.3.0",
     "concurrently": "^8.2.2",
     "dotenv-cli": "^7.4.1",
     "eslint": "^8",
     "eslint-config-next": "14.2.0",
-    "eslint-plugin-storybook": "^0.12.0",
+    "eslint-plugin-storybook": "0.0.0-pr-31987-sha-5b4f0632",
     "http-server": "^14.1.1",
     "mockdate": "^3.0.5",
     "module-alias": "^2.2.3",
     "msw": "^2.6.6",
-    "msw-storybook-addon": "^2.0.4",
+    "msw-storybook-addon": "^2.0.5",
     "nyc": "^15.1.0",
     "playwright": "1.51.1",
     "prettier": "^3.2.5",
     "prisma": "^5.11.0",
     "prisma-mock": "^0.10.2",
-    "storybook": "^8.6.11",
+    "storybook": "0.0.0-pr-31987-sha-5b4f0632",
     "tinyrainbow": "^1.2.0",
     "ts-node": "^10.9.2",
     "tsx": "^4.19.2",
     "typescript": "^5.4.5",
     "vite": "^6.0.0",
-    "vitest": "^2.1.8",
+    "vitest": "^3.0.0",
     "vitest-axe": "^0.1.0",
-    "wait-on": "^7.2.0"
+    "wait-on": "^7.2.0",
+    "@storybook/nextjs-vite": "0.0.0-pr-31987-sha-5b4f0632",
+    "@storybook/addon-vitest": "0.0.0-pr-31987-sha-5b4f0632",
+    "@storybook/addon-docs": "0.0.0-pr-31987-sha-5b4f0632"
   },
   "prettier": {
     "singleQuote": true,
@@ -115,4 +97,4 @@
     ]
   },
   "packageManager": "[email protected]+sha512.9df9cf27c91715646c7d675d1c9c8e41f6fce88246f1318c1aa6a1ed1aeb3c4f032fcdf4ba63cc69c4fe6d634279176b5358727d8f2cc1e65b65f43ce2f8bfb0"
-}
+}