test: wip pass trpc as fixture & with vue context

Author: DrJume

.gitignore

@@ -1,3 +1,5 @@
+.DS_Store
+
 node_modules/
 dist/
-.eslintcache
+.eslintcache

test/basic.test.ts

@@ -1,16 +1,36 @@
-import { VueQueryPlugin } from '@tanstack/vue-query'
-import { expect, test } from 'vitest'
-import { createApp } from 'vue'
+/* eslint-disable no-empty-pattern */
+import { keepPreviousData, useQuery } from '@tanstack/vue-query'
+import { test as base, expect } from 'vitest'
 
-import { trpc } from './trpc/client'
+import { app, useTRPC } from './vue-app'
 
-const app = createApp({})
-app.use(VueQueryPlugin)
+const test = base.extend<{
+  trpc: ReturnType<typeof useTRPC>
+}>({
+  trpc: [
+    async ({}, use) => {
+      await app.runWithContext(async () => {
+        const trpc = useTRPC()
+        await use(trpc)
+      })
+    },
+    { auto: true },
+  ],
+})
+
+test('useQuery()', async ({ trpc }) => {
+  const _trpc = useTRPC()
 
-test('useQuery()', async () => {
-  await app.runWithContext(async () => {
-    const pong = trpc.ping.useQuery()
-    await pong.suspense()
-    expect(pong.data.value).toEqual('Pong!')
+  const pong = trpc.ping.useQuery(undefined, {
+    placeholderData: keepPreviousData,
+  })
+  const query = useQuery({
+    queryKey: ['ping'],
+    queryFn: () => 2,
+    placeholderData: keepPreviousData,
   })
+  query.data
+  pong.data
+  await pong.suspense()
+  expect(pong.data.value).toEqual('Pong!')
 })

test/trpc/client.ts

@@ -0,0 +1,36 @@
+import { VueQueryPlugin, useQueryClient } from '@tanstack/vue-query'
+import { httpBatchLink } from '@trpc/client'
+import { createApp, inject } from 'vue'
+
+import { createTRPCVueQueryClient } from '../src/index'
+
+import type { AppRouter } from './trpc/index'
+import type { InjectionKey } from 'vue'
+
+const trpcKey = Symbol('trpc') as InjectionKey<
+  ReturnType<typeof createTRPCVueQueryClient<AppRouter>>
+>
+
+export const app = createApp({})
+
+app.use(VueQueryPlugin)
+app.use({
+  install() {
+    const queryClient = app.runWithContext(useQueryClient)
+    const trpc = createTRPCVueQueryClient<AppRouter>({
+      queryClient,
+      trpc: {
+        links: [httpBatchLink({ url: 'http://localhost:3000' })],
+      },
+    })
+
+    app.provide(trpcKey, trpc)
+  },
+})
+
+export function useTRPC() {
+  const trpc = inject(trpcKey)
+  if (!trpc) throw new Error('tRPC client is not available.')
+
+  return trpc
+}

test/vue-app.ts

@@ -2,7 +2,7 @@ import { defineConfig } from 'vitest/config'
 
 export default defineConfig({
   test: {
-    setupFiles: ['./test/setup.ts'],
+    // setupFiles: ['./test/setup.ts'],
     // environment: 'happy-dom',
     typecheck: {
       enabled: true,