Son
Son2y 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
Son
Son2y 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
Son2y 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 🐱
You need to add a fetch implementation To the httpBatchLink Or a global fetch polyfill
Son
Son2y 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 🐱
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
Son
Son2y 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?