Fix tests

.nvmrc

@@ -0,0 +1 @@
+20.15.1

.storybook-vite/polyfills/promise-with-resolvers.ts

@@ -0,0 +1,19 @@
+if (typeof (Promise as any).withResolvers === "undefined") {
+  (Promise as any).withResolvers = <T>(): {
+    promise: Promise<T>;
+    resolve: (value: T | PromiseLike<T>) => void;
+    // biome-ignore lint/suspicious/noExplicitAny: any is needed for the reject function
+    reject: (reason?: any) => void;
+  } => {
+    let resolve: (value: T | PromiseLike<T>) => void;
+    let reject: (reason?: unknown) => void;
+
+    const promise = new Promise<T>((res, rej) => {
+      resolve = res;
+      reject = rej;
+    });
+
+    // @ts-ignore
+    return { promise, resolve, reject };
+  };
+}

.storybook-vite/preview.tsx

@@ -1 +1,35 @@
-export * from '../.storybook/preview'
+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'
+
+initialize({ onUnhandledRequest: 'bypass', quiet: false })
+
+const preview: Preview = {
+    parameters: {
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+        test: {
+            // This is needed until Next will update to the React 19 beta: https://github.com/vercel/next.js/pull/65058
+            // In the React 19 beta ErrorBoundary errors (such as redirect) are only logged, and not thrown.
+            dangerouslyIgnoreUnhandledErrors: true,
+        },
+        nextjs: { appDirectory: true },
+    },
+    loaders: [() => {
+    }, mswLoader, () => {
+    }],
+    beforeEach() {
+        // Fixed dates for consistent screenshots
+        MockDate.set('2024-04-18T12:24:02Z')
+        // reset the database to avoid hanging state between stories
+        initializeDB()
+    },
+}
+
+export default preview

.storybook-vite/storybook.setup.ts

@@ -5,6 +5,8 @@ import * as rscAnnotations from '@storybook/react/dist/entry-preview-rsc.mjs'
 import * as addonActionsAnnotations from '@storybook/addon-actions/preview'
 import * as addonInteractionsAnnotations from '@storybook/addon-interactions/preview'
 import * as projectAnnotations from './preview'
+import "./polyfills/promise-with-resolvers";
+
 
 const { cleanup, render: testingLibraryRender } = await import(
   '@testing-library/react/pure'

.storybook-vite/vitest.config.mts

@@ -3,6 +3,8 @@ import { storybookTest } from '@storybook/experimental-vitest-plugin'
 import vitePluginNext from 'vite-plugin-storybook-nextjs'
 import { defineConfig } from 'vitest/config'
 
+const __dirname = import.meta.dirname;
+
 export default defineConfig({
   plugins: [
     vitePluginNext({ dir: path.join(__dirname, '..') }),

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

@@ -1,3 +1,7 @@
+/**
+ * @vitest-environment jsdom
+ */
+
 import { type Meta, type StoryObj } from '@storybook/react'
 import { cookies } from '@storybook/nextjs/headers.mock'
 import { http } from 'msw'
@@ -9,7 +13,6 @@ import { PageDecorator } from '#.storybook/decorators'
 import { login } from '#app/actions.mock'
 import * as auth from '#app/auth/route'
 import { expectRedirect } from '#lib/test-utils'
-import { getRouter } from '@storybook/nextjs/navigation.mock'
 
 const meta = {
   component: Page,
@@ -77,7 +80,7 @@ export const LoginShouldGetOAuthTokenAndSetCookie: Story = {
   beforeEach() {
     // Point the login implementation to the endpoint github would have redirected too.
     login.mockImplementation(async () => {
-      return await auth.GET(new Request('/auth?code=storybookjs'))
+      return await auth.GET(new Request('http://www.example.com/auth?code=storybookjs'))
     })
   },
   play: async ({ canvasElement }) => {

app/note/[id]/page.tsx

@@ -11,7 +11,7 @@ type Props = {
 
 export default async function Page({ params }: Props) {
   const note = await db.note.findUnique({ where: { id: Number(params.id) } })
-  if (note === null) {
+  if (note == undefined) {
     return (
       <div className="note--empty-state">
         <span className="note-text--empty-state">

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

@@ -1,3 +1,7 @@
+/**
+ * @vitest-environment jsdom
+ */
+
 import { expect, userEvent, waitFor, within } from '@storybook/test'
 import { type Meta, type StoryObj } from '@storybook/react'
 import { cookies } from '@storybook/nextjs/headers.mock'

app/note/edit/page.stories.tsx

@@ -1,3 +1,7 @@
+/**
+ * @vitest-environment jsdom
+ */
+
 import { expect, userEvent, within } from '@storybook/test'
 import { type Meta, type StoryObj } from '@storybook/react'
 import { cookies } from '@storybook/nextjs/headers.mock'

components/note-ui.stories.tsx

@@ -1,3 +1,7 @@
+/**
+ * @vitest-environment jsdom
+ */
+
 import { expect, userEvent, within } from '@storybook/test'
 import { type Meta, type StoryObj } from '@storybook/react'
 import { deleteNote, saveNote } from '#app/actions.mock'
@@ -9,8 +13,8 @@ const meta = {
   component: NoteUI,
   async beforeEach() {
     getUserFromSession.mockReturnValue('storybookjs')
-    saveNote.mockImplementation(async () => {})
-    deleteNote.mockImplementation(async () => {})
+    saveNote.mockImplementation(async () => { })
+    deleteNote.mockImplementation(async () => { })
   },
 } satisfies Meta<typeof NoteUI>
 

components/note-ui.tsx

@@ -8,13 +8,13 @@ import { type Note } from '@prisma/client'
 
 type Props =
   | {
-      note: Partial<Note>
-      isEditing: true
-    }
+    note: Partial<Note>
+    isEditing: true
+  }
   | {
-      note: Note
-      isEditing: false
-    }
+    note: Note
+    isEditing: false
+  }
 
 export default function NoteUI({ note, isEditing }: Props) {
   const user = getUserFromSession()

components/search.stories.tsx

@@ -1,3 +1,7 @@
+/**
+ * @vitest-environment jsdom
+ */
+
 import { getRouter } from '@storybook/nextjs/navigation.mock'
 import { type Meta, type StoryObj } from '@storybook/react'
 import Search from './search'

package.json

@@ -46,7 +46,7 @@
     "date-fns": "^3.6.0",
     "marked": "^1.2.9",
     "ms": "^2.1.3",
-    "next": "^14.2.3",
+    "next": "^14.2.5",
     "oauth": "^0.10.0",
     "react": "^18.3",
     "react-dom": "^18.3",
@@ -62,7 +62,7 @@
     "@storybook/addon-viewport": "^8.3.0-alpha.3",
     "@storybook/blocks": "^8.3.0-alpha.3",
     "@storybook/builder-vite": "^8.3.0-alpha.3",
-    "@storybook/experimental-vitest-plugin": "^0.0.3",
+    "@storybook/experimental-vitest-plugin": "^0.0.4",
     "@storybook/nextjs": "^8.3.0-alpha.3",
     "@storybook/react": "^8.3.0-alpha.3",
     "@storybook/test": "^8.3.0-alpha.3",
@@ -82,6 +82,7 @@
     "eslint-plugin-storybook": "^0.8.0",
     "happy-dom": "^14.12.3",
     "http-server": "^14.1.1",
+    "jsdom": "^24.1.1",
     "mockdate": "^3.0.5",
     "module-alias": "^2.2.3",
     "msw": "^2.3.4",
@@ -96,7 +97,7 @@
     "tsx": "^4.7.1",
     "typescript": "^5.4.5",
     "vite": "^5.3.5",
-    "vite-plugin-storybook-nextjs": "^0.0.7",
+    "vite-plugin-storybook-nextjs": "^0.0.12",
     "vitest": "^2.0.4",
     "wait-on": "^7.2.0"
   },