TRPC Testing Wrapper - Unit Testing components that contain a query (Not testing the query it self)
This is my wrapper
When ever i use it i get a
Can anyone help?
my test
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 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();
});
