Use module mocking

.gitignore

@@ -35,4 +35,6 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-*storybook.log
+*storybook.log
+
+/prisma/dmmf.json

app/(planner)/events/page.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { redirect } from 'next/navigation';
-import { getUser } from '../../actions/user';
-import { getEvents } from '../../actions/events';
+import { getUser } from '#app/actions/user';
+import { getEvents } from '#app/actions/events';
 import Planner from '../../../components/ui/Planner';
 
 async function getData() {

app/(planner)/print/page.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { redirect } from 'next/navigation';
-import Planner from '@/components/ui/PlannerPDF';
-import { getUser } from '@/app/actions/user';
-import { getEvents } from '@/app/actions/events';
+import Planner from '#components/ui/PlannerPDF';
+import { getUser } from '#app/actions/user';
+import { getEvents } from '#app/actions/events';
 
 async function getData() {
   const user = await getUser();

app/actions/events.ts

@@ -1,6 +1,6 @@
 'use server';
-import { getUser } from './user';
-import prisma from '../../lib/prisma';
+import { getUser } from '#app/actions/user';
+import prisma from '#lib/prisma';
 
 export type Event = {
   id?: string;

app/actions/user.mock.ts

@@ -1,8 +1,6 @@
 'use server';
 import { fn } from '@storybook/test';
-import * as actual from './user';
 
-export * from './user';
-export const getUser = fn(actual.getUser).mockName('getUser');
-export const getSignInUrl = fn(actual.getSignInUrl).mockName('getSignInUrl');
-export const signOut = fn(actual.signOut).mockName('signOut');
+export const getUser = fn(async() => {}).mockName('getUser');
+export const getSignInUrl = fn(async() => {}).mockName('getSignInUrl');
+export const signOut = fn(async() => {}).mockName('signOut');

app/page.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import NextLink from 'next/link';
-import { getUser, getSignInUrl, signOut } from '@/app/actions/user';
-import { Input } from '@/components/ui/input';
-import { Button as ShadButton } from '@/components/ui/button';
+import { getUser, getSignInUrl, signOut } from '#app/actions/user.mock';
+import { Input } from '#components/ui/input';
+import { Button as ShadButton } from '#components/ui/button';
 // import { Button, Flex, Heading, Text } from '@radix-ui/themes';
-import { SignInButton } from '@/components/ui/signInButton';
+import { SignInButton } from '#components/ui/signInButton';
 import Image from 'next/image';
 
 async function getData() {

components/ui/PDF.tsx

@@ -15,7 +15,7 @@ import {
   TableCell,
 } from './table';
 import { BlankTable } from './BlankTable';
-import type { Event } from '@/app/actions/events';
+import type { Event } from '#app/actions/events';
 
 function compare(a: Event, b: Event) {
   if (a.endAt > b.endAt) return -1;

components/ui/Planner.tsx

@@ -8,8 +8,8 @@
 import React, { useState } from 'react';
 import NextLink from 'next/link';
 import { format } from 'date-fns';
-import type { User } from '@/app/actions/user';
-import type { Event } from '@/app/actions/events';
+import type { User } from '#app/actions/user';
+import type { Event } from '#app/actions/events';
 import { CirclePicker } from 'react-color';
 
 import { Popover, PopoverTrigger, PopoverContent } from './popover';
@@ -41,7 +41,7 @@ import {
   TableBody,
   TableCell,
 } from './table';
-import { createEvent } from '@/app/actions/events';
+import { createEvent } from '#app/actions/events';
 
 export default function Planner({
   currentDate = new Date(),

components/ui/PlannerPDF.tsx

@@ -6,7 +6,7 @@ import { addDays, format } from 'date-fns';
 import PDF from './PDF';
 import { Popover, PopoverTrigger, PopoverContent } from './popover';
 import { Button } from './button';
-import type { Event } from '@/app/actions/events';
+import type { Event } from '#app/actions/events';
 
 function generateDateArray(dateRange: { from: Date; to: Date }) {
   const { from, to } = dateRange;

components/ui/button.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from '@/lib/utils';
+import { cn } from '#lib/utils';
 
 const buttonVariants = cva(
   'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',

components/ui/calendar.tsx

@@ -3,8 +3,8 @@
 import * as React from 'react';
 import { DayPicker } from 'react-day-picker';
 
-import { cn } from '@/lib/utils';
-import { buttonVariants } from '@/components/ui/button';
+import { cn } from '#lib/utils';
+import { buttonVariants } from '#components/ui/button';
 import 'react-day-picker/style.css';
 export type CalendarProps = React.ComponentProps<typeof DayPicker>;
 

components/ui/label.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from '@/lib/utils';
+import { cn } from '#lib/utils';
 
 const labelVariants = cva(
   'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'

components/ui/select.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { Check, ChevronDown, ChevronUp } from 'lucide-react';
 
-import { cn } from '@/lib/utils';
+import { cn } from '#lib/utils';
 
 const Select = SelectPrimitive.Root;
 

components/ui/table.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { cn } from '@/lib/utils';
+import { cn } from '#lib/utils';
 
 const Table = React.forwardRef<
   HTMLTableElement,

lib/prisma.mock.ts

@@ -0,0 +1,38 @@
+import { Prisma, type PrismaClient } from '@prisma/client'
+import { fn, isMockFunction } from '@storybook/test'
+import createPrismaMock from 'prisma-mock'
+import json from '#prisma/dmmf.json'
+
+// @ts-expect-error Specify jest.fn as it is used by prisma-mock
+globalThis.jest = { fn }
+
+const createPrismaClientMock = (
+  data: Parameters<typeof createPrismaMock<PrismaClient>>[0] = {},
+) => {
+  const db = createPrismaMock<PrismaClient>(
+    data,
+    json.datamodel as unknown as Prisma.DMMF.Datamodel,
+  )
+  // Give some more useful spy names
+  for (const [tableName, table] of Object.entries(db)) {
+    for (const [methodName, method] of Object.entries(table)) {
+      if (isMockFunction(method)) {
+        method.mockName(`db.${tableName}.${methodName}`)
+      }
+    }
+  }
+  return db
+}
+
+export default createPrismaClientMock()
+
+export function initializeDB(
+  data: Parameters<typeof createPrismaMock<PrismaClient>>[0] = {},
+) {
+  db = createPrismaClientMock(data)
+
+  // @ts-ignore This Error class is not loaded properly in the browser, mocking it for now like a regular Error
+  Prisma.PrismaClientKnownRequestError = class PrismaClientKnownRequestError extends (
+    Error
+  ) {}
+}