1---
2title: Avoid Snapshot-Only Tests - They Don't Prove Correctness
3impact: MEDIUM
4impactDescription: Snapshot tests verify structure but not functionality, leading to false confidence and brittle tests
5type: best-practice
6tags: [vue3, testing, snapshot, vitest, vue-test-utils, anti-pattern]
7---
8 
9# Avoid Snapshot-Only Tests - They Don't Prove Correctness
10 
11**Impact: MEDIUM** - Snapshot tests only verify that HTML structure hasn't changed - they don't verify that the component works correctly. Relying exclusively on snapshots leads to false confidence and tests that break on any refactoring, even when functionality is preserved.
12 
13Use snapshots sparingly for regression detection. Prefer behavioral assertions that test what the component does.
14 
15## Task Checklist
16 
17- [ ] Don't use snapshots as the only assertion for component behavior
18- [ ] Use snapshots for regression detection on stable UI components
19- [ ] Always pair snapshots with behavioral assertions
20- [ ] Keep snapshots small and focused (avoid full component snapshots)
21- [ ] Review snapshot diffs carefully - don't blindly update
22- [ ] Consider inline snapshots for small, critical structures
23 
24**Incorrect:**
25```javascript
26import { mount } from '@vue/test-utils'
27import UserCard from './UserCard.vue'
28 
29// BAD: Snapshot-only test proves nothing about functionality
30test('UserCard renders correctly', () => {
31  const wrapper = mount(UserCard, {
32    props: { user: { name: 'John', email: '[email protected]' } }
33  })
34 
35  expect(wrapper.html()).toMatchSnapshot()
36})
37 
38// This test passes even if:
39// - The email isn't clickable
40// - The avatar doesn't load
41// - User actions are completely broken
42// - Accessibility is broken
43```
44 
45**Correct:**
46```javascript
47import { mount } from '@vue/test-utils'
48import UserCard from './UserCard.vue'
49 
50// CORRECT: Test actual behavior
51test('UserCard displays user information', () => {
52  const wrapper = mount(UserCard, {
53    props: { user: { name: 'John', email: '[email protected]' } }
54  })
55 
56  expect(wrapper.find('[data-testid="user-name"]').text()).toBe('John')
57  expect(wrapper.find('[data-testid="user-email"]').text()).toBe('[email protected]')
58})
59 
60test('UserCard email link is clickable', async () => {
61  const wrapper = mount(UserCard, {
62    props: { user: { name: 'John', email: '[email protected]' } }
63  })
64 
65  const emailLink = wrapper.find('a[href^="mailto:"]')
66  expect(emailLink.exists()).toBe(true)
67  expect(emailLink.attributes('href')).toBe('mailto:[email protected]')
68})
69 
70test('UserCard emits select event when clicked', async () => {
71  const wrapper = mount(UserCard, {
72    props: { user: { id: 1, name: 'John' } }
73  })
74 
75  await wrapper.trigger('click')
76 
77  expect(wrapper.emitted('select')).toBeTruthy()
78  expect(wrapper.emitted('select')[0]).toEqual([{ id: 1, name: 'John' }])
79})
80```
81 
82## When Snapshots ARE Useful
83 
84### Regression Detection for Stable Components
85```javascript
86// ACCEPTABLE: Snapshot as additional check, not the only check
87test('ErrorBoundary renders error message', () => {
88  const wrapper = mount(ErrorBoundary, {
89    props: { error: new Error('Something went wrong') }
90  })
91 
92  // Primary assertions - verify behavior
93  expect(wrapper.find('.error-title').text()).toBe('Error')
94  expect(wrapper.find('.error-message').text()).toContain('Something went wrong')
95 
96  // Secondary snapshot - catches unexpected structural changes
97  expect(wrapper.find('.error-container').html()).toMatchSnapshot()
98})
99```
100 
101### Inline Snapshots for Small Structures
102```javascript
103// ACCEPTABLE: Inline snapshot for small, critical structure
104test('generates correct list markup', () => {
105  const wrapper = mount(ListItem, { props: { item: 'Test' } })
106 
107  expect(wrapper.html()).toMatchInlineSnapshot(`
108    "<li class="list-item">Test</li>"
109  `)
110})
111```
112 
113### Complex SVG or Icon Output
114```javascript
115// ACCEPTABLE: Snapshot for complex generated content
116test('renders correct chart SVG', () => {
117  const wrapper = mount(PieChart, {
118    props: { data: [30, 40, 30] }
119  })
120 
121  // Verify key behavior
122  expect(wrapper.findAll('path').length).toBe(3)
123 
124  // Snapshot for full SVG structure
125  expect(wrapper.find('svg').html()).toMatchSnapshot()
126})
127```
128 
129## Better Alternatives to Snapshots
130 
131### Test Specific Elements
132```javascript
133// Instead of snapshotting entire component
134test('renders product with all required fields', () => {
135  const wrapper = mount(ProductCard, {
136    props: { product: { name: 'Widget', price: 9.99, inStock: true } }
137  })
138 
139  expect(wrapper.find('.product-name').text()).toBe('Widget')
140  expect(wrapper.find('.product-price').text()).toContain('9.99')
141  expect(wrapper.find('.in-stock-badge').exists()).toBe(true)
142})
143```
144 
145### Test CSS Classes for Styling
146```javascript
147test('applies danger styling for errors', () => {
148  const wrapper = mount(Alert, {
149    props: { type: 'error', message: 'Failed!' }
150  })
151 
152  expect(wrapper.classes()).toContain('alert-danger')
153  expect(wrapper.find('.alert-icon').classes()).toContain('icon-error')
154})
155```
156 
157### Use Testing Library Queries
158```javascript
159import { render, screen } from '@testing-library/vue'
160 
161test('form has accessible labels', () => {
162  render(LoginForm)
163 
164  // Testing Library queries verify accessibility
165  expect(screen.getByLabelText('Email')).toBeInTheDocument()
166  expect(screen.getByLabelText('Password')).toBeInTheDocument()
167  expect(screen.getByRole('button', { name: 'Sign In' })).toBeInTheDocument()
168})
169```
170 
171## Snapshot Anti-Patterns
172 
173```javascript
174// ANTI-PATTERN: Giant component snapshot
175test('page renders', () => {
176  const wrapper = mount(EntirePageComponent)
177  expect(wrapper.html()).toMatchSnapshot()  // 500+ lines of HTML
178})
179 
180// ANTI-PATTERN: Snapshot with dynamic content
181test('shows current date', () => {
182  const wrapper = mount(DateDisplay)
183  expect(wrapper.html()).toMatchSnapshot()  // Fails every day!
184})
185 
186// ANTI-PATTERN: Snapshot after every test
187test('button works', async () => {
188  const wrapper = mount(Counter)
189  await wrapper.find('button').trigger('click')
190  expect(wrapper.html()).toMatchSnapshot()  // Redundant
191})
192```
193 
194## Reference
195- [Vue.js Testing Guide - What Not to Test](https://vuejs.org/guide/scaling-up/testing)
196- [Effective Snapshot Testing](https://kentcdodds.com/blog/effective-snapshot-testing)
197- [Vitest Snapshot Testing](https://vitest.dev/guide/snapshot.html)
198