chore: update dependencies and add more react tests

package.json

@@ -12,12 +12,12 @@
     "test": "pnpm --filter \"./packages/**\" test"
   },
   "devDependencies": {
-    "@types/react": "18.3.1",
+    "@types/react": "18.3.2",
     "@types/react-dom": "18.3.0",
     "@types/ws": "8.5.10",
     "lint-staged": "15.2.2",
     "prettier": "3.2.5",
-    "rimraf": "5.0.5",
+    "rimraf": "5.0.7",
     "simple-git-hooks": "2.11.1",
     "typescript": "5.4.5",
     "vitest": "1.6.0"

packages/msw-trpc/package.json

@@ -29,12 +29,16 @@
     "url": "https://github.com/maloguertin/msw-trpc/issues"
   },
   "homepage": "https://github.com/maloguertin/msw-trpc#readme",
+  "dependencies": {
+    "@trpc/client": "11.0.0-rc.370",
+    "msw": "2.3.0-ws.rc-6"
+  },
   "devDependencies": {
-    "@trpc/client": "11.0.0-rc.366",
+    "@trpc/client": "11.0.0-rc.370",
     "msw": "2.3.0-ws.rc-6"
   },
   "peerDependencies": {
-    "@trpc/server": ">=11.0.0-rc.364",
+    "@trpc/server": ">=11.0.0-rc.370",
     "msw": ">=2.3.0-ws.rc-6"
   }
 }

packages/test-node/package.json

@@ -8,10 +8,10 @@
     "type-check": "tsc --noEmit"
   },
   "devDependencies": {
-    "@trpc/client": "11.0.0-rc.366",
-    "@trpc/server": "11.0.0-rc.366",
+    "@trpc/client": "11.0.0-rc.370",
+    "@trpc/server": "11.0.0-rc.370",
     "msw": "2.3.0-ws.rc-6",
     "superjson": "2.2.1",
-    "undici": "6.16.0"
+    "undici": "6.16.1"
   }
 }

packages/test-react/package.json

@@ -8,16 +8,18 @@
     "type-check": "tsc --noEmit"
   },
   "devDependencies": {
-    "@tanstack/react-query": "5.35.1",
+    "@tanstack/react-query": "5.36.0",
     "@testing-library/jest-dom": "6.4.5",
     "@testing-library/react": "15.0.7",
-    "@trpc/client": "11.0.0-rc.366",
-    "@trpc/react-query": "11.0.0-rc.366",
-    "@types/react": "18.3.1",
+    "@trpc/client": "11.0.0-rc.370",
+    "@trpc/react-query": "11.0.0-rc.370",
+    "@trpc/server": "11.0.0-rc.370",
+    "@types/react": "18.3.2",
     "@types/react-dom": "18.3.0",
     "jsdom": "24.0.0",
     "msw": "2.3.0-ws.rc-6",
     "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react-dom": "18.3.1",
+    "superjson": "2.2.1"
   }
 }

packages/test-react/src/basic.test.tsx

@@ -1,18 +1,22 @@
 import { describe, test, expect, beforeAll, afterAll, afterEach } from 'vitest'
-import { createTRPCMsw, httpLink, wsLink, createWSClient } from '../../msw-trpc/src'
+import { createTRPCMsw, httpLink, wsLink, createWSClient, splitLink } from '../../msw-trpc/src'
 import { setupServer } from 'msw/node'
 import { render, screen, waitFor } from '@testing-library/react'
-import type { AppRouter } from '../../test-node/src/routers'
+import type { AppRouter } from './routers/basic.js'
+import type { AppRouteWithSuperJson } from './routers/superjson.js'
+
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import {
   createTRPCReact,
   httpLink as TRPChttpLink,
   wsLink as TRPCwsLink,
+  splitLink as TRPCsplitLink,
   createWSClient as TRPCcreateWSClient,
 } from '@trpc/react-query'
 import { useState } from 'react'
+import SuperJSON from 'superjson'
 
-describe('basic', () => {
+describe.only('basic', () => {
   const server = setupServer()
 
   beforeAll(() => server.listen())
@@ -192,4 +196,101 @@ describe('basic', () => {
       expect(screen.getByText('Didier')).toBeInTheDocument()
     })
   })
+
+  test('split link', async () => {
+    const queryClient = new QueryClient()
+
+    const trpc = createTRPCReact<AppRouter>()
+
+    const client = trpc.createClient({
+      links: [
+        TRPCsplitLink({
+          condition: (op) => {
+            return op.type === 'subscription'
+          },
+          true: TRPCwsLink({
+            client: TRPCcreateWSClient({
+              url: `ws://api.localhost:3001/trpc`,
+            }),
+          }),
+          false: TRPChttpLink({
+            url: `http://api.localhost:3000/trpc`,
+            fetch: (url, options) => fetch(url, { ...options, credentials: 'include' }),
+          }),
+        }),
+      ],
+    })
+
+    const App = () => {
+      const { data } = trpc.userById.useQuery('1')
+
+      trpc.getUserUpdates.useSubscription('1', {
+        onData: (data) => setRecord(data),
+      })
+
+      const [record, setRecord] = useState<{
+        id: string
+        name: string
+      } | null>(null)
+
+      if (record) {
+        return <div>{record.name}</div>
+      }
+
+      if (data) {
+        return <div>{data.name}</div>
+      }
+
+      return <div>Hello</div>
+    }
+
+    const mswTrpc = createTRPCMsw<AppRouter>({
+      links: [
+        splitLink({
+          condition: (op) => {
+            return op.type === 'subscription'
+          },
+          true: wsLink({
+            client: createWSClient({
+              url: 'ws://api.localhost:3001/trpc',
+            }),
+          }),
+          false: httpLink({
+            url: 'http://api.localhost:3000/trpc',
+          }),
+        }),
+      ],
+    })
+
+    const subscription = mswTrpc.getUserUpdates.subscription()
+
+    server.use(
+      mswTrpc.userById.query((id) => {
+        return { id, name: 'Tutu' }
+      }),
+      subscription.handler
+    )
+
+    render(
+      <trpc.Provider client={client} queryClient={queryClient}>
+        <QueryClientProvider client={queryClient}>
+          <App />
+        </QueryClientProvider>
+      </trpc.Provider>
+    )
+
+    expect(screen.getByText('Hello')).toBeInTheDocument()
+
+    await waitFor(() => {
+      expect(screen.getByText('Tutu')).toBeInTheDocument()
+    })
+
+    await new Promise((resolve) => setTimeout(resolve, 50))
+
+    subscription.trigger({ id: '5', name: 'Didier' })
+
+    await waitFor(() => {
+      expect(screen.getByText('Didier')).toBeInTheDocument()
+    })
+  })
 })

packages/test-react/src/routers/basic.ts

@@ -0,0 +1,62 @@
+import { initTRPC } from '@trpc/server'
+import { observable } from '@trpc/server/observable'
+
+const t = initTRPC.create()
+
+export interface User {
+  id: string
+  name: string
+}
+
+const userList: User[] = [
+  {
+    id: '1',
+    name: 'KATT',
+  },
+]
+
+const appRouter = t.router({
+  userById: t.procedure
+    .input((val: unknown) => {
+      if (typeof val === 'string') return val
+
+      throw new Error(`Invalid input: ${typeof val}`)
+    })
+    .query((req) => {
+      const { input } = req
+
+      const user = userList.find((u) => u.id === input)
+
+      return user
+    }),
+  createUser: t.procedure
+    .input((val: unknown) => {
+      if (typeof val === 'string') return val
+
+      throw new Error(`Invalid input: ${typeof val}`)
+    })
+    .mutation((req) => {
+      const { input } = req
+
+      return {
+        id: '2',
+        name: input,
+      } as User
+    }),
+  getUserUpdates: t.procedure
+    .input((val: unknown) => {
+      if (typeof val === 'string') return val
+
+      throw new Error(`Invalid input: ${typeof val}`)
+    })
+    .subscription(() => {
+      return observable<User>((emit) => {
+        emit.next({ id: '3', name: 'Marie' })
+      })
+    }),
+})
+
+const nestedRouter = t.router({ deeply: { nested: appRouter } })
+
+export type NestedAppRouter = typeof nestedRouter
+export type AppRouter = typeof appRouter

packages/test-react/src/routers/superjson.ts

@@ -0,0 +1,60 @@
+import { initTRPC } from '@trpc/server'
+import { observable } from '@trpc/server/observable'
+import SuperJSON from 'superjson'
+
+const t = initTRPC.create({ transformer: SuperJSON })
+
+export interface User {
+  id: string
+  name: string
+}
+
+const userList: User[] = [
+  {
+    id: '1',
+    name: 'KATT',
+  },
+]
+
+const appRouter = t.router({
+  userById: t.procedure
+    .input((val: unknown) => {
+      if (typeof val === 'string') return val
+
+      throw new Error(`Invalid input: ${typeof val}`)
+    })
+    .query((req) => {
+      const { input } = req
+
+      const user = userList.find((u) => u.id === input)
+
+      return user
+    }),
+  createUser: t.procedure
+    .input((val: unknown) => {
+      if (typeof val === 'string') return val
+
+      throw new Error(`Invalid input: ${typeof val}`)
+    })
+    .mutation((req) => {
+      const { input } = req
+
+      return {
+        id: '2',
+        name: input,
+      } as User
+    }),
+  getUserUpdates: t.procedure
+    .input((val: unknown) => {
+      if (typeof val === 'string') return val
+
+      throw new Error(`Invalid input: ${typeof val}`)
+    })
+    .subscription(() => {
+      return observable<User>((emit) => {
+        emit.next({ id: '3', name: 'Marie' })
+      })
+    }),
+})
+
+export type AppRouteWithSuperJson = typeof appRouter