TRPC Test Wrapper for unit and integration testing using jest and react testing library - client mock

Question

How do you mock the TRPC client for unit and integration testing using jest and react testing library?

Answer 1

We need to create a TRPC Testing Wrapper around components that use query methods. This was the case for a react native application I was working on

• Unit Testing components that contain a query (Not for necessarily testing the query it self)

export const TRPCWrapper = ({ children }: { children: ReactNode }) => {
  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({
      links: [
        httpBatchLink({
          url: platformSpecificLocalHostUrl,
          fetch: async (input, init?) => {
            const fetch = getFetch();
            return fetch(input, {
              ...init,
              // credentials: "include",
            });
          },
        }),
      ],
    })
  );

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