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();
  });

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();
  });
});

SOLVED: I had to share the same instance of the trpc client into my trpc mock. so I put it in global store and used that instance in my test and it worked.

You need to add a fetch implementation

To the httpBatchLink

Or a global fetch polyfill

Thanks for entering this thread! Really appreciate it. I’m a total noob tbh but I’m learning as i go.

Why do i need to add that and how should I implement it.

Im guessing i would need a mutation aswell? Or am I mixing things up here?

On the httpBatchLink there's a prop called fetch

Import node-fetch and put it in there

Typecast as any to get rid of type error if you need

Thank you, its only to get rid of type errors?

Is my mock the right way to go about it?

With the wrapper?

Or are you saying I don’t need the shared client? I just need to add the fetch prop

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>
  );
};

can this be added to the docs?