SonS
tRPCβ€’4y agoβ€’
13 replies
Son

TRPC Testing Wrapper - Unit Testing components that contain a query (Not testing the query it self)

This is my wrapper
reference from trpc: https://github.com/WeirdoGit/NewGitRepo/blob/162cd9317c0e978ea2e666488a133838859cd50b/packages/server/test/react.test.tsx#L337

const TRPCWrapper = ({ children }: { children: ReactNode }) => {
  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({
      links: [
        httpBatchLink({
          url: platformSpecificLocalHostUrl,
        }),
      ],
    })
  );

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


When ever i use it i get a httpBatchLink no fetch implementation error.

Can anyone help?

my test

 test('Create ticket screen should contain header text Create Ticket', async () => {
    const MockedCreateTicketModalScreen = () => {
      return (
        <NavigationContainer>
          <CreateTicketModalScreen />
        </NavigationContainer>
      );
    };

    render(<MockedCreateTicketModalScreen />, { wrapper: TRPCWrapper });
    const textNextToLogo = await screen.findByText('Create Ticket');
    console.log(textNextToLogo);

    expect(textNextToLogo).toBeTruthy();
  });
Screenshot_2022-11-21_at_13.46.19.png
GitHub
Contribute to WeirdoGit/NewGitRepo development by creating an account on GitHub.
NewGitRepo/react.test.tsx at 162cd9317c0e978ea2e666488a133838859cd5...
Was this page helpful?