1---
2name: snapshot-testing
3description: Snapshot testing with file, inline, and file snapshots
4---
5 
6# Snapshot Testing
7 
8Snapshot tests capture output and compare against stored references.
9 
10## Basic Snapshot
11 
12```ts
13import { expect, test } from 'vitest'
14 
15test('snapshot', () => {
16  const result = generateOutput()
17  expect(result).toMatchSnapshot()
18})
19```
20 
21First run creates `.snap` file:
22 
23```js
24// __snapshots__/test.spec.ts.snap
25exports['snapshot 1'] = `
26{
27  "id": 1,
28  "name": "test"
29}
30`
31```
32 
33## Inline Snapshots
34 
35Stored directly in test file:
36 
37```ts
38test('inline snapshot', () => {
39  const data = { foo: 'bar' }
40  expect(data).toMatchInlineSnapshot()
41})
42```
43 
44Vitest updates the test file:
45 
46```ts
47test('inline snapshot', () => {
48  const data = { foo: 'bar' }
49  expect(data).toMatchInlineSnapshot(`
50    {
51      "foo": "bar",
52    }
53  `)
54})
55```
56 
57## File Snapshots
58 
59Compare against explicit file:
60 
61```ts
62test('render html', async () => {
63  const html = renderComponent()
64  await expect(html).toMatchFileSnapshot('./expected/component.html')
65})
66```
67 
68## Snapshot Hints
69 
70Add descriptive hints:
71 
72```ts
73test('multiple snapshots', () => {
74  expect(header).toMatchSnapshot('header')
75  expect(body).toMatchSnapshot('body content')
76  expect(footer).toMatchSnapshot('footer')
77})
78```
79 
80## Object Shape Matching
81 
82Match partial structure:
83 
84```ts
85test('shape snapshot', () => {
86  const data = { 
87    id: Math.random(), 
88    created: new Date(),
89    name: 'test' 
90  }
91  
92  expect(data).toMatchSnapshot({
93    id: expect.any(Number),
94    created: expect.any(Date),
95  })
96})
97```
98 
99## Error Snapshots
100 
101```ts
102test('error message', () => {
103  expect(() => {
104    throw new Error('Something went wrong')
105  }).toThrowErrorMatchingSnapshot()
106})
107 
108test('inline error', () => {
109  expect(() => {
110    throw new Error('Bad input')
111  }).toThrowErrorMatchingInlineSnapshot(`[Error: Bad input]`)
112})
113```
114 
115## Updating Snapshots
116 
117```bash
118# Update all snapshots
119vitest -u
120vitest --update
121 
122# In watch mode, press 'u' to update failed snapshots
123```
124 
125## Custom Serializers
126 
127Add custom snapshot formatting:
128 
129```ts
130expect.addSnapshotSerializer({
131  test(val) {
132    return val && typeof val.toJSON === 'function'
133  },
134  serialize(val, config, indentation, depth, refs, printer) {
135    return printer(val.toJSON(), config, indentation, depth, refs)
136  },
137})
138```
139 
140Or via config:
141 
142```ts
143// vitest.config.ts
144defineConfig({
145  test: {
146    snapshotSerializers: ['./my-serializer.ts'],
147  },
148})
149```
150 
151## Snapshot Format Options
152 
153```ts
154defineConfig({
155  test: {
156    snapshotFormat: {
157      printBasicPrototype: false, // Don't print Array/Object prototypes
158      escapeString: false,
159    },
160  },
161})
162```
163 
164## Concurrent Test Snapshots
165 
166Use context's expect:
167 
168```ts
169test.concurrent('concurrent 1', async ({ expect }) => {
170  expect(await getData()).toMatchSnapshot()
171})
172 
173test.concurrent('concurrent 2', async ({ expect }) => {
174  expect(await getOther()).toMatchSnapshot()
175})
176```
177 
178## Snapshot File Location
179 
180Default: `__snapshots__/<test-file>.snap`
181 
182Customize:
183 
184```ts
185defineConfig({
186  test: {
187    resolveSnapshotPath: (testPath, snapExtension) => {
188      return testPath.replace('__tests__', '__snapshots__') + snapExtension
189    },
190  },
191})
192```
193 
194## Key Points
195 
196- Commit snapshot files to version control
197- Review snapshot changes in code review
198- Use hints for multiple snapshots in one test
199- Use `toMatchFileSnapshot` for large outputs (HTML, JSON)
200- Inline snapshots auto-update in test file
201- Use context's `expect` for concurrent tests
202 
203<!-- 
204Source references:
205- https://vitest.dev/guide/snapshot.html
206- https://vitest.dev/api/expect.html#tomatchsnapshot
207-->
208