|
| 1 | +# @vitest/snapshot |
| 2 | + |
| 3 | +Lightweight implementation of Jest's snapshots. |
| 4 | + |
| 5 | +## Usage |
| 6 | + |
| 7 | +```js |
| 8 | +import { SnapshotClient } from '@vitest/snapshot' |
| 9 | +import { NodeSnapshotEnvironment } from '@vitest/snapshot/environment' |
| 10 | +import { SnapshotManager } from '@vitest/snapshot/manager' |
| 11 | + |
| 12 | +export class CustomSnapshotClient extends SnapshotClient { |
| 13 | + // by default, @vitest/snapshot checks equality with `!==` |
| 14 | + // you need to provide your own equality check implementation |
| 15 | + // this function is called when `.toMatchSnapshot({ property: 1 })` is called |
| 16 | + equalityCheck(received, expected) { |
| 17 | + return equals(received, expected, [iterableEquality, subsetEquality]) |
| 18 | + } |
| 19 | +} |
| 20 | + |
| 21 | +const client = new CustomSnapshotClient() |
| 22 | +// class that implements snapshot saving and reading |
| 23 | +// by default uses fs module, but you can provide your own implementation depending on the environment |
| 24 | +const environment = new NodeSnapshotEnvironment() |
| 25 | + |
| 26 | +const getCurrentFilepath = () => '/file.spec.ts' |
| 27 | +const getCurrentTestName = () => 'test1' |
| 28 | + |
| 29 | +const wrapper = (received) => { |
| 30 | + function __INLINE_SNAPSHOT__(inlineSnapshot, message) { |
| 31 | + client.assert({ |
| 32 | + received, |
| 33 | + message, |
| 34 | + isInline: true, |
| 35 | + inlineSnapshot, |
| 36 | + // you need to implement this yourselves, |
| 37 | + // this depends on your runner |
| 38 | + filepath: getCurrentFilepath(), |
| 39 | + name: getCurrentTestName(), |
| 40 | + }) |
| 41 | + } |
| 42 | + return { |
| 43 | + // the name is hard-coded, it should be inside another function, so Vitest can find the actual test file where it was called (parses call stack trace + 2) |
| 44 | + // you can override this behaviour in SnapshotState's `_inferInlineSnapshotStack` method by providing your own SnapshotState to SnapshotClient constructor |
| 45 | + toMatchInlineSnapshot: (...args) => __INLINE_SNAPSHOT__(...args), |
| 46 | + } |
| 47 | +} |
| 48 | + |
| 49 | +const options = { |
| 50 | + updateSnapshot: 'new', |
| 51 | + snapshotEnvironment: environment, |
| 52 | +} |
| 53 | + |
| 54 | +await client.setTest(getCurrentFilepath(), getCurrentTestName(), options) |
| 55 | + |
| 56 | +// uses "pretty-format", so it requires quotes |
| 57 | +// also naming is hard-coded when parsing test files |
| 58 | +wrapper('text 1').toMatchInlineSnapshot() |
| 59 | +wrapper('text 2').toMatchInlineSnapshot('"text 2"') |
| 60 | + |
| 61 | +const result = await client.resetCurrent() // this saves files and returns SnapshotResult |
| 62 | + |
| 63 | +// you can use manager to manage several clients |
| 64 | +const manager = new SnapshotManager(options) |
| 65 | +manager.add(result) |
| 66 | + |
| 67 | +// do something |
| 68 | +// and then read the summary |
| 69 | + |
| 70 | +console.log(manager.summary) |
| 71 | +``` |
0 commit comments