TTC
Theo's Typesafe Cult•2y ago
Son

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

This is my wrapper 
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>
  );
};
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();
  });
 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();
  });
6 Replies
Son
Son•2y ago
my current implementation is trying to call a function in the component but there is no context for it in my test i'm guessing, this is since removing the wrapper. 
  test('Create ticket screen should contain header text Create Ticket', async () => {
    const MockedCreateTicketModalScreen = () => {
      return (
        <NavigationContainer>
          <CreateTicketModalScreen />
        </NavigationContainer>
      );
    };

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

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

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

    expect(textNextToLogo).toBeTruthy();
  });
});
Son
Son•2y ago
Son
Son•2y ago
Thank you this is was the final solution 
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>
  );
};
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>
  );
};
Gaurang
Gaurang•2y ago
Thanks for documenting your journey setting up testing with trpc. This really helped me get oriented although I eventually went for a similar solution shown here: https://github.com/mthomps4/trpc-next-auth-spike/blob/ae259ca5d1e09fce206d8a7e985646ad16c46a37/tests/utils.tsx
GitHub
trpc-next-auth-spike/utils.tsx at ae259ca5d1e09fce206d8a7e985646ad1...
trpc-next-auth-spike. Contribute to mthomps4/trpc-next-auth-spike development by creating an account on GitHub.
Gaurang
Gaurang•2y ago
Leaving this here for my future self and anyone else how may run into this issue as well. Also includes setup/config for cypress testing as well. For posterity I also came across a few other useful examples which I think it's worth documenting here:
Gaurang
Gaurang•2y ago
Simple example with mocking the session and router: https://github.com/ziadsabillah/eduPlatform/blob/f2e5345e136e0c69eab843289f0a47c021d4a3df/src/tests/login.test.tsx
GitHub
eduPlatform/login.test.tsx at f2e5345e136e0c69eab843289f0a47c021d4a...
Contribute to ziadsabillah/eduPlatform development by creating an account on GitHub.
Want results from more Discord servers?
Add your server