https://github.com/markjaquith/sveltekit-playwright-fetch-mock
Tools for mocking SSR fetch() requests in SvelteKit for use in Playwright
https://github.com/markjaquith/sveltekit-playwright-fetch-mock
Last synced: about 1 year ago
JSON representation
Tools for mocking SSR fetch() requests in SvelteKit for use in Playwright
- Host: GitHub
- URL: https://github.com/markjaquith/sveltekit-playwright-fetch-mock
- Owner: markjaquith
- License: mit
- Created: 2023-01-06T07:54:09.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-09-19T20:24:03.000Z (over 2 years ago)
- Last Synced: 2025-04-17T20:09:11.164Z (about 1 year ago)
- Language: TypeScript
- Size: 187 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# SvelteKit Playwright Fetch() Mock
Allows you to mock `fetch()` requests when running Playwright E2E tests on a SvelteKit codebase.
Playwright already lets you mock browser `fetch()` requests. This allows you to tell the SvelteKit dev server to deliver mocked responses for `fetch()` calls it makes while doing Server-Side Rendering.
This can speed up your end-to-end tests and make them more reliable, as well as not require credentials for external APIs to be input to your continuous integration environment.
## Installation
`npm i sveltekit-playwright-fetch-mock`
## Usage
`src/hooks.server.ts`
```ts
import type { HandleFetch, Handle } from '@sveltejs/kit'
import { sequence } from '@sveltejs/kit/hooks'
import {
handle as handleHttpMocks,
handleFetch as handleMockedResponses,
} from 'sveltekit-playwright-fetch-mock'
import { PUBLIC_LOCAL } from '$env/static/public'
export const handle = sequence(
handleHttpMocks(PUBLIC_LOCAL === '1'),
) satisfies Handle
export const handleFetch = (async ({ request, fetch, event }) => {
const mockedResponse = handleMockedResponses(request, event)
if (mockedResponse) {
return mockedResponse
}
return fetch(request)
}) satisfies HandleFetch
```
In your local and CI environments, add `PUBLIC_LOCAL=1` to your environment.
This is what tells the mock code to be active. You can name this however you like, if you also change the reference in `src/hooks.server.ts` to match it.
`src/app.d.ts`
```ts
type FetchMocks = Record<
string,
{
status: number
statusText: string
headers?: Record
body: string
}
>
declare namespace App {
// interface Error {}
interface Locals {
fetchMocks: FetchMocks
isPlaywright: boolean
}
// interface PageData {}
// interface Platform {}
}
```
And finally in your Playwright test:
```ts
import { expect, test } from '@playwright/test'
import { mockFetch } from 'sveltekit-playwright-fetch-mock'
test('Example.com test', async ({ page }) => {
await mockFetch(page, /^https:\/\/www\.example\.com\//, {
somedata: 'example',
})
await page.goto('/some-local-route-that-fetches-example-dot-com')
// Your Playwright assertions here.
})
```
So what this means is that when you go to `/some-local-route-that-fetches-example-dot-com` in your SvelteKit app, and the `+page.server.js` or `+page.server.ts` file for that route calls `fetch` (using the one that SvelteKit provides you) to get data from `https://www.example.com/`, this package will intercept that request and return `{ somedata: "example" }`