trpc-sveltekit
trpc-sveltekit copied to clipboard
How to use trpc directly in playwright testing?
Describe the bug Unable to use trpc client in playwright tests
To Reproduce Steps to reproduce the behavior:
- Setup a sveltekit project with playwright enabled
- Create a basic tRPC config with an endpoint
- Try to directly call it from playwright
Expected behavior The client should work as it does in Svelte files in the frontend
Additional context I tried various methods to create the client in playwright:
- I tried using it without args and it gave me an
Calling createTRPCClient() on the server requires passing a valid LoadEvent argument - Maybe I'm supposed to use
createCaller()withcreateContext()like we do in server load functions, but what do we pass to thecreateContext()? - Creating the client with
{ url: { origin: page.url() } }also doesn't seem to work and give this error:TRPCClientError: Unexpected token '<', "<!doctype "... is not valid JSON
Playwright runs in a node environment, so you are unable to create a browser trpc client with trpc-sveltekit. It is missing the necessary context to know where to send the requests.
https://github.com/icflorescu/trpc-sveltekit/blob/bb3259371ca1d40e8dcdcfe0bb88843965b2a9f0/package/src/client.ts#L64-L80
If you want to test your endpoint, you will need to manually create a client with @trpc/client and pass in where your web server is running.
import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
const client = createTRPCProxyClient({
links: [httpBatchLink({ url: "..." })],
});
I tried this too, the method returns a weird string union