trpc-sveltekit icon indicating copy to clipboard operation
trpc-sveltekit copied to clipboard

How to use trpc directly in playwright testing?

Open WhyAsh5114 opened this issue 1 year ago • 2 comments
trafficstars

Describe the bug Unable to use trpc client in playwright tests

To Reproduce Steps to reproduce the behavior:

  1. Setup a sveltekit project with playwright enabled
  2. Create a basic tRPC config with an endpoint
  3. 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:

  1. I tried using it without args and it gave me an Calling createTRPCClient() on the server requires passing a valid LoadEvent argument
  2. Maybe I'm supposed to use createCaller() with createContext() like we do in server load functions, but what do we pass to the createContext()?
  3. 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

WhyAsh5114 avatar Jun 18 '24 05:06 WhyAsh5114

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: "..." })],
});

mass8326 avatar Jun 19 '24 17:06 mass8326

I tried this too, the method returns a weird string union image

WhyAsh5114 avatar Jun 20 '24 06:06 WhyAsh5114