testing setup

test/trpc/vitest.trpcProvider.mock.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { trpc } from '~/app/_trpc/Client' 
+import { createTestTrpcClient } from './vitest.trpcProxyClient'
+
+export default function TrpcProvider({ children }:{children: React.ReactNode}) {
+  const queryClient = new QueryClient()
+  const trpcClient = createTestTrpcClient()
+  console.log("using test provider")
+  return (
+    <trpc.Provider client={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>
+        {children}
+      </QueryClientProvider>
+    </trpc.Provider>
+  )}

test/trpc/vitest.trpcProxyClient.ts

@@ -0,0 +1,26 @@
+import { createTRPCProxyClient, httpBatchLink } from '@trpc/client'
+import { fetchRequestHandler } from '@trpc/server/adapters/fetch'
+import { trpcRouter, type TrpcRouter } from '~/server/routers/_app'
+
+// This simulates the server without HTTP
+function serverHandler(path: string, req: Request) {
+  return fetchRequestHandler({
+    endpoint: '/api/trpc',
+    router: trpcRouter,
+    req,
+    createContext: () => ({}),
+  })
+}
+
+export function createTestTrpcClient() {
+  return createTRPCProxyClient<TrpcRouter>({
+    links: [
+      httpBatchLink({
+        url: 'http://localhost/api/trpc',
+        fetch: (input, init) => {
+          return serverHandler(input as string, new Request(input as string, init))
+        },
+      }),
+    ],
+  })
+}