mirror of
https://github.com/vitest-dev/vitest.git
synced 2025-12-08 18:26:03 +00:00
115 lines
3.5 KiB
Markdown
115 lines
3.5 KiB
Markdown
# Mocking Requests
|
|
|
|
Because Vitest runs in Node, mocking network requests is tricky; web APIs are not available, so we need something that will mimic network behavior for us. We recommend [Mock Service Worker](https://mswjs.io/) to accomplish this. It allows you to mock `http`, `WebSocket` and `GraphQL` network requests, and is framework agnostic.
|
|
|
|
Mock Service Worker (MSW) works by intercepting the requests your tests make, allowing you to use it without changing any of your application code. In-browser, this uses the [Service Worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API). In Node.js, and for Vitest, it uses the [`@mswjs/interceptors`](https://github.com/mswjs/interceptors) library. To learn more about MSW, read their [introduction](https://mswjs.io/docs/)
|
|
|
|
## Configuration
|
|
|
|
You can use it like below in your [setup file](/config/#setupfiles)
|
|
|
|
::: code-group
|
|
|
|
```js [HTTP Setup]
|
|
import { afterAll, afterEach, beforeAll } from 'vitest'
|
|
import { setupServer } from 'msw/node'
|
|
import { http, HttpResponse } from 'msw'
|
|
|
|
const posts = [
|
|
{
|
|
userId: 1,
|
|
id: 1,
|
|
title: 'first post title',
|
|
body: 'first post body',
|
|
},
|
|
// ...
|
|
]
|
|
|
|
export const restHandlers = [
|
|
http.get('https://rest-endpoint.example/path/to/posts', () => {
|
|
return HttpResponse.json(posts)
|
|
}),
|
|
]
|
|
|
|
const server = setupServer(...restHandlers)
|
|
|
|
// Start server before all tests
|
|
beforeAll(() => server.listen({ onUnhandledRequest: 'error' }))
|
|
|
|
// Close server after all tests
|
|
afterAll(() => server.close())
|
|
|
|
// Reset handlers after each test for test isolation
|
|
afterEach(() => server.resetHandlers())
|
|
```
|
|
|
|
```js [GraphQL Setup]
|
|
import { afterAll, afterEach, beforeAll } from 'vitest'
|
|
import { setupServer } from 'msw/node'
|
|
import { graphql, HttpResponse } from 'msw'
|
|
|
|
const posts = [
|
|
{
|
|
userId: 1,
|
|
id: 1,
|
|
title: 'first post title',
|
|
body: 'first post body',
|
|
},
|
|
// ...
|
|
]
|
|
|
|
const graphqlHandlers = [
|
|
graphql.query('ListPosts', () => {
|
|
return HttpResponse.json({
|
|
data: { posts },
|
|
})
|
|
}),
|
|
]
|
|
|
|
const server = setupServer(...graphqlHandlers)
|
|
|
|
// Start server before all tests
|
|
beforeAll(() => server.listen({ onUnhandledRequest: 'error' }))
|
|
|
|
// Close server after all tests
|
|
afterAll(() => server.close())
|
|
|
|
// Reset handlers after each test for test isolation
|
|
afterEach(() => server.resetHandlers())
|
|
```
|
|
|
|
```js [WebSocket Setup]
|
|
import { afterAll, afterEach, beforeAll } from 'vitest'
|
|
import { setupServer } from 'msw/node'
|
|
import { ws } from 'msw'
|
|
|
|
const chat = ws.link('wss://chat.example.com')
|
|
|
|
const wsHandlers = [
|
|
chat.addEventListener('connection', ({ client }) => {
|
|
client.addEventListener('message', (event) => {
|
|
console.log('Received message from client:', event.data)
|
|
// Echo the received message back to the client
|
|
client.send(`Server received: ${event.data}`)
|
|
})
|
|
}),
|
|
]
|
|
|
|
const server = setupServer(...wsHandlers)
|
|
|
|
// Start server before all tests
|
|
beforeAll(() => server.listen({ onUnhandledRequest: 'error' }))
|
|
|
|
// Close server after all tests
|
|
afterAll(() => server.close())
|
|
|
|
// Reset handlers after each test for test isolation
|
|
afterEach(() => server.resetHandlers())
|
|
```
|
|
:::
|
|
|
|
> Configuring the server with `onUnhandledRequest: 'error'` ensures that an error is thrown whenever there is a request that does not have a corresponding request handler.
|
|
|
|
## More
|
|
There is much more to MSW. You can access cookies and query parameters, define mock error responses, and much more! To see all you can do with MSW, read [their documentation](https://mswjs.io/docs).
|