T
tRPC

❓-help

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

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

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 `useMutationtesting a trpc hooki'm brand new to testing and need some help with writing a test for a hook that is returning an objeCAS AuthenticationSo long story short. My University is using CAS as authentication provider. I was thinking that I coDifference 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 theclear cookie onErrorI'd like to clear a cookie (in nextjs) when a 403 error happens. I've been looking at the global errRequest context from getServerSidePropsThe docs of tRPC context https://trpc.io/docs/v10/context ``` export async function createContext(oAuth 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 resAccessToken for API callsWhat would be the best approach to pass the AccessToken from NextAuth Session to the Http Client whiRequest or Response Specification Definition DocumentI am developing a backend service using trpc, but I need to dispatch trpc in another programming lanabortOnUnmount config errorI'm encountering an error when passing abortOnUnmount saying that it does not exist as a possible pazustand + 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 methoHow 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 objecant 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.