itsravenous
itsravenous2y 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
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
goofygoober16mo ago
@itsravenous any chance you've found a fix for this? I also have the same issue 😦
itsravenous
itsravenous16mo ago
Nope, sorry - I just ended up adding an @ts-expect-error comment and forgetting about it!
goofygoober
goofygoober16mo 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?
itsravenous
itsravenous16mo ago
Sorry, it's a client project
goofygoober
goofygoober16mo ago
All g, thanks anyways!
itsravenous
itsravenous16mo ago
👍 Essentially the code snippet above should be enough, and the add @ts-expect-error comments to squish tRPC/Typescript's complaints.