https://github.com/hrsh7th/msw-snapshot
Transparently create an API cache for testing.
https://github.com/hrsh7th/msw-snapshot
Last synced: 5 months ago
JSON representation
Transparently create an API cache for testing.
- Host: GitHub
- URL: https://github.com/hrsh7th/msw-snapshot
- Owner: hrsh7th
- Created: 2022-02-05T03:57:56.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-01-14T12:42:01.000Z (almost 2 years ago)
- Last Synced: 2025-04-28T21:46:09.803Z (6 months ago)
- Language: TypeScript
- Size: 1.02 MB
- Stars: 6
- Watchers: 2
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
msw-snapshot
============================================================
Transparently create an API cache for testing.
Install
------------------------------------------------------------
```sh
$ npm i -D msw msw-snapshot
```
Configuration
------------------------------------------------------------
```ts
import { setupServer } from 'msw/node';
import { snapshot } from 'snapshot'
type Info = {
request: Request;
cookies: Record;
context: { namespace: string };
}
const server = setupServer(
snapshot({
/**
* Specify the directory path to store snapshot files.
*/
basePath: string;
/**
* Specify msw's handler RegExp.
*/
test?: RegExp; // default: /.*/
/**
* Specify whether to update snapshot or not.
*/
updateSnapshots?: boolean | 'none' | 'all' | 'missing'; // default: false
/**
* Specify whether to ignore existing snapshot or not.
*/
ignoreSnapshots?: boolean; // default: false
/**
* Callback when response is received from server.
*/
onFetchFromServer?: (info: Info, snapshot: Snapshot) => void;
/**
* Callback when response is received from snapshot.
*/
onFetchFromSnapshot?: (info: Info, snapshot: Snapshot) => void;
/**
* Callback when snapshot is updated.
*/
onSnapshotUpdated?: (info: Info, snapshot: Snapshot) => void;
/**
* Create request identifier.
*/
createSnapshotPath?: (info: Info) => Promise;
})
);
server.listen();
// The all requests are snapshotted.
server.close();
```
Recipe
------------------------------------------------------------
- [Next.js x playwright](./examples/e2e-nextjs-playwright)
FAQ
------------------------------------------------------------
### How should I use `createSnapshotPath`?
You can control the snapshot directory layout via this.
For example, if you want to create snapshot files that should be located per request host and pathname, you can use the following configuration.
```
snapshot({
...
createSnapshotPath: async (info) => {
const url = new URL(info.request.url);
return [
url.host,
url.pathname,
toHashString([
info.request.method,
url.origin,
url.pathname,
getSortedEntries(maskURLSearchParams(url.searchParams, ['t'])), // this
getSortedEntries(info.request.headers),
getSortedEntries(info.cookies),
new TextDecoder('utf-8').decode(await info.request.arrayBuffer()),
])
].join('/');
},
...
})
```
For another use-case, if you want to create snapshot files for each vitest/jest test-cases, you probably use the following configuration.
```
import { context, snapshot } from 'msw-snapshot';
import { beforeEach } from 'vitest';
beforeEach(ctx => {
context.namespace = ctx.expect.getState().currentTestName;
})
const fetchCountMap = {};
snapshot({
...
createSnapshotPath: async (info) => {
fetchCountMap[info.context.namespace] = fetchCountMap[info.context.namespace] ?? 0;
fetchCountMap[info.context.namespace]++;
return `${info.context.namespace}-${String(fetchCountMap[info.context.namespace]).padStart(3, '0')}`
},
...
})
```
### How should I use `mask***` functions?
For example, if your app appends cache busting query like `t=${Date.now()}`, `msw-snapshot` will take unexpected snapshots.
In this case, You can control snapshot identity via `createSnapshotPath`.
```ts
import { snapshot, toHashString, maskURLSearchParams } from 'msw-snapshot';
snapshot({
...
createSnapshotPath: async (info) => {
const url = new URL(info.request.url);
return [
url.host,
url.pathname,
toHashString([
info.request.method,
url.origin,
url.pathname,
getSortedEntries(maskURLSearchParams(url.searchParams, ['t'])), // this
getSortedEntries(info.request.headers),
getSortedEntries(info.cookies),
new TextDecoder('utf-8').decode(await info.request.arrayBuffer()),
])
].join('/');
},
...
})
```