❓-help

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

TTCI

11/21/2022

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

TTCI

11/21/2022

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

TTCI

11/21/2022

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.

AKAlex / KATT 🐱

11/21/2022

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

TTCI

11/21/2022

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?

AKAlex / KATT 🐱

11/21/2022

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

TTCI

11/22/2022

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?

Looking for more? Join the community!

❓-help

❓-help

Recommended Posts

query and mutate promise on nextI've followed the guide "Usage with Next.js" and now I only have the `useQuery` and use `useMutation testing a trpc hooki'm brand new to testing and need some help with writing a test for a hook that is returning an obje CAS AuthenticationSo long story short. My University is using CAS as authentication provider. I was thinking that I co Difference in type inference for vanilla client?Hello, querying an endpoint with the vanilla tRPC client but at runtime the actual result isn't the Zod Error MiddlewareHey lovely people. At Cal.com we make heavy use of `zod` for data validation. I was wondering if the clear cookie onErrorI'd like to clear a cookie (in nextjs) when a 403 error happens. I've been looking at the global err Request context from getServerSidePropsThe docs of tRPC context https://trpc.io/docs/v10/context ``` export async function createContext(o Auth with passport.jsEvening all, Has anyone successfully setup trpc with passport.js for auth?Object keeps getting overwrittenI feel like i'm missing something fundamental here. when I add a new entry into object ``b`` it res AccessToken for API callsWhat would be the best approach to pass the AccessToken from NextAuth Session to the Http Client whi Request or Response Specification Definition DocumentI am developing a backend service using trpc, but I need to dispatch trpc in another programming lan abortOnUnmount config errorI'm encountering an error when passing abortOnUnmount saying that it does not exist as a possible pa zustand + trpc (basic data fetching)im trying to use zustand with trpc, but having trouble setting some data to global state. What am i TypeError Cannot destructure property 'abortOnUnmount' of 'useContext(...)' as it is null.Zero Clue what is error mean exactly....First time learning trpc really good tool. help with setting cookies on front end.Hello how do you use tRPC to make a cookie and send it to the front end. or is there any other metho How do we add settings in each query like before?Since the new update, bee super confused. I used to do this, and can't recreate it now. ``` const Handling error globallyAccording to the docs on errors https://trpc.io/docs/v10/error-handling I should get such error obje cant access trpc endpoints via the browseri'm converting some express endpoints to trpc, and I cant figure out how to access my endpoints via tRPC without SSRWhen using tRPC with ssr it uses `getInitialProps`, which has kinda of a cool effect in terms how a trpc + expo react native issueDoes anyone know how to solve this? Im not familiar with webpack at all. I’m a junior frontend.