Son•3y ago

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

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

GitHub

NewGitRepo/react.test.tsx at 162cd9317c0e978ea2e666488a133838859cd5...

Contribute to WeirdoGit/NewGitRepo development by creating an account on GitHub.

6 Replies

SonOP•3y 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();
  });
});

SonOP•3y ago

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.

Alex / KATT 🐱•3y ago

You need to add a fetch implementation To the httpBatchLink Or a global fetch polyfill

SonOP•3y ago

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?

Alex / KATT 🐱•3y ago

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

SonOP•3y ago

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

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?