https://github.com/c-ehrlich/msw-trpc-example

https://github.com/c-ehrlich/msw-trpc-example

Last synced: 14 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/c-ehrlich/msw-trpc-example
• Owner: c-ehrlich
• Created: 2023-05-14T12:01:34.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-02-22T13:20:40.000Z (9 months ago)
• Last Synced: 2024-10-04T13:26:57.528Z (about 1 month ago)
• Language: TypeScript
• Size: 167 KB
• Stars: 23
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Example for mocking a tRPC API endpoint with `msw-trpc`

This repo contains a Next.js app using tRPC, and a unit test for a component that uses Mock Service Worker with `msw-trpc` to intercept network requests.

It is reduced to the bare minimum to focus only on the msw testing setup, and should not be used as a reference on how to build an entire app.

The files you'll probably want to look at are:

- `vitest.config.ts` is a minimal Vitest config

- `src/__test__/setup.tsx` creates our mocked tRPC client and a function to render components with the required providers

- `src/components/greeting.tsx` exports the Greeting component that we are testing

- `src/components/greeting.test.tsx` tests our Greeting component

To get started:

```

pnpm i

pnpm test

```

resources:

- [msw-trpc](https://github.com/maloguertin/msw-trpc)

TODO: 

- some imports are not using `~` because vitest couldn't traverse the import alias for some reason. fix this.

- some sort of setup (for example dependabot, github actions, etc) to update dependencies and check in CI that everything still works.

PRs welcome. Open an issue first if you're not sure, or contact me on twitter/discord/etc.