https://github.com/maloguertin/msw-trpc
tPRC support for MSW
https://github.com/maloguertin/msw-trpc
jest msw trpc
Last synced: 8 months ago
JSON representation
tPRC support for MSW
- Host: GitHub
- URL: https://github.com/maloguertin/msw-trpc
- Owner: maloguertin
- Created: 2023-01-22T20:00:46.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-01-18T15:51:57.000Z (over 2 years ago)
- Last Synced: 2024-03-15T15:10:18.645Z (over 2 years ago)
- Topics: jest, msw, trpc
- Language: TypeScript
- Homepage:
- Size: 166 KB
- Stars: 170
- Watchers: 4
- Forks: 13
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
msw-trpc
## **[tPRC](https://trpc.io/) support for [MSW](https://mswjs.io/)**
- Create MSW handlers from your tRPC router.
- Get your tRPC typing into your MSW handlers.
- Augments MSW with utils for tRPC.
- Use it like you would use the tRPC client.
- Merged routers supported !
- Use `msw` v2
## Motivation
As someone who loves MSW and was already using it I wanted to keep using it instead of mocking tRPC. While it is possible to simply write the Rest handlers it felt like it would be great not to lose the full power of tRPC types in the tests.
## Usage
**1. Install `msw-trpc`.**
```bash
npm i msw-trpc --save-dev
```
**2. build your trpcMsw with createTRPCMsw.**
```typescript
import { createTRPCMsw } from 'msw-trpc'
import type { AppRouter } from 'path/to/your/router'
export const trpcMsw = createTRPCMsw() /* 👈 */
```
**3. Start using it.**
```typescript
const server = setupServer(
trpcMsw.userById.query(() => ({ id: '1', name: 'Uncle bob' })),
trpcMsw.createUser.mutation((name) => ({ id: '2', name }))
)
```
You can find examples of how to use it in the [test-react](./packages/test-react/package.json) package or in the [test-node](./packages/test-node/package.json) package.
## How it works
`createTRPCMsw` returns a Proxy that infers types from your AppRouter
```typescript
// all queries will expose a query function that accepts a MSW handler
trpcMsw.myQuery.query(() => {})
// all mutations will expose a mutation function that accepts a MSW handler
trpcMsw.myMutation.mutation(() => {})
```
## Config
You need to pass a `httpLink` to the `createTRPCMsw` function like you would do with the tRPC client.
You can pass an optional transformer like `superjson` to the `createTRPCMsw` function.
```typescript
interface TRPCMswConfig {
links: Link[]
transformer?: TRPCCombinedDataTransformer
}
```
## Requirements
Peer dependencies:
- [`tRPC`](https://github.com/trpc/trpc) server v11 (`@trpc/server@next`) must be installed.
- [`msw`](https://github.com/mswjs/msw) (`msw`) must be installed.
Please note:
- Batch is not yet supported