itsravenous•2y ago

Typing a shared TRPC provider for testing

Context: - We have a monorepo with several micro-frontends which use Next. - We're moving to using tRPC to communicate between the front end and Next backend - We test our components with React Testing Library - We have a shared package for our testing utils, including a render method that renders a component for testing with all required providers (Theme, i18n, etc etc) Problem: We want to add a tRPC provider to the providers that our custom render method wraps around the component under test, so that components that use tRPC queries/mutations can be tested with RTL. The basic idea is something like this:

import { AnyRouter } from '@trpc/server';

export const testTRPC = createTRPCReact<AnyRouter>();

export const TRPCWrapper = ({ children }: { children: ReactNode }) => {
  const queryClient = new QueryClient();

  const trpcClient = testTRPC.createClient({
    links: [
      httpLink({
        url: `http://localhost/trpc`,
      }),
    ],
  });

  return (
    <testTRPC.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </testTRPC.Provider>
  );
};

import { AnyRouter } from '@trpc/server';

export const testTRPC = createTRPCReact<AnyRouter>();

export const TRPCWrapper = ({ children }: { children: ReactNode }) => {
  const queryClient = new QueryClient();

  const trpcClient = testTRPC.createClient({
    links: [
      httpLink({
        url: `http://localhost/trpc`,
      }),
    ],
  });

  return (
    <testTRPC.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </testTRPC.Provider>
  );
};

but TypeScript complains about testTRPC.createClient:

Property 'createClient' does not exist on type '"The property 'useContext' in your router collides with a built-in method, rename this router or procedure on your backend." | "The property 'Provider' in your router collides with a built-in method, rename this router or procedure on your backend." | "The property 'createClient' in your router collides with a built...'.

Property 'createClient' does not exist on type '"The property 'useContext' in your router collides with a built-in method, rename this router or procedure on your backend." | "The property 'Provider' in your router collides with a built-in method, rename this router or procedure on your backend." | "The property 'createClient' in your router collides with a built...'.

and testTRPC.Provider:

Property 'Provider' does not exist on type '"The property 'useContext' in your router collides with a built-in method, rename this router or procedure on your backend." | "The property 'Provider' in your router collides with a built-in method, rename this router or procedure on your backend." | "The property 'createClient' in your router collides with a built...'.

Property 'Provider' does not exist on type '"The property 'useContext' in your router collides with a built-in method, rename this router or procedure on your backend." | "The property 'Provider' in your router collides with a built-in method, rename this router or procedure on your backend." | "The property 'createClient' in your router collides with a built...'.

I'm guessing the usage of AnyRouter is the problem here, but really not sure what type I can provide here, since it could be the AppRouter from any one of our micro-frontends - perhaps something using generics?

7 Replies

Jökull Sólberg•2y ago

I have this exact problem! Ended up putting the code in src but in the package root I have index.ts that exports everything I want to make available. Super simple tsconfig. I'm sure there's another way but I gave up.

goofygoober•2y ago

@itsravenous any chance you've found a fix for this? I also have the same issue 😦

itsravenousOP•2y ago

Nope, sorry - I just ended up adding an @ts-expect-error comment and forgetting about it!

goofygoober•2y ago

All g, thanks for the reply. Any chance this was an open source project you were working on that you could share the repo to?

itsravenousOP•2y ago

Sorry, it's a client project

goofygoober•2y ago

All g, thanks anyways!

itsravenousOP•2y ago

👍 Essentially the code snippet above should be enough, and the add @ts-expect-error comments to squish tRPC/Typescript's complaints.

Typing a shared TRPC provider for testing

Did you find this page helpful?