Snapshot testing in Vue - Step-by-Step Execution

Concept Flow - Snapshot testing

Write Component Code

↓

Render Component in Test

↓

Generate Snapshot File

↓

Compare Rendered Output to Snapshot

↓

Test Passes

↓

Update Snapshot or Fix Code

Snapshot testing captures the component's output and compares it to a saved snapshot to detect unexpected changes.

Execution Sample

Vue

import { mount } from '@vue/test-utils';
import MyButton from './MyButton.vue';

test('renders correctly', () => {
  const wrapper = mount(MyButton);
  expect(wrapper.html()).toMatchSnapshot();
});

This test mounts a Vue component and checks if its HTML matches the saved snapshot.

Execution Table

Step	Action	Rendered Output	Snapshot Exists?	Comparison Result	Test Outcome
1	Mount MyButton component	<button>Click me</button>	No	N/A	Create new snapshot, Test Passes
2	Run test again	<button>Click me</button>	Yes	Match	Test Passes
3	Change component text to 'Press me'	<button>Press me</button>	Yes	Mismatch	Test Fails
4	Update snapshot after change	<button>Press me</button>	Yes	Match	Test Passes

💡 Test stops after snapshot matches or mismatch is handled by update or fix.

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
Rendered Output	N/A	<button>Click me</button>	<button>Click me</button>	<button>Press me</button>	<button>Press me</button>
Snapshot Exists	No	Yes	Yes	Yes	Yes
Comparison Result	N/A	N/A	Match	Mismatch	Match
Test Outcome	N/A	Pass	Pass	Fail	Pass

Key Moments - 3 Insights

Why does the test fail when the component text changes?

Because the rendered output no longer matches the saved snapshot, as shown in execution_table row 3 where Comparison Result is 'Mismatch'.

What happens if there is no existing snapshot?

A new snapshot is created from the rendered output, and the test passes, as shown in execution_table row 1.

How do you fix a failing snapshot test after intentional changes?

You update the snapshot to match the new output, then the test passes, as shown in execution_table row 4.

Visual Quiz - 3 Questions

Look at the execution table, what is the test outcome at step 3 when the component text changes?

A Snapshot Created

B Test Passes

C Test Fails

D Test Skipped

💡 Hint

Check the 'Test Outcome' column at step 3 in the execution_table.

At which step does the snapshot first exist?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the 'Snapshot Exists?' column in the execution_table.

If the component output changes but you do not update the snapshot, what happens?

A Test fails due to mismatch

B Test passes because output is ignored

C Snapshot is automatically updated

D Test is skipped

💡 Hint

Refer to execution_table row 3 where output changes but snapshot mismatch causes failure.

Concept Snapshot

Snapshot Testing in Vue:
- Mount component with @vue/test-utils
- Render component HTML
- Compare HTML to saved snapshot file
- If no snapshot, create one and pass test
- If mismatch, test fails until snapshot updated
- Helps catch unexpected UI changes

Full Transcript

Snapshot testing in Vue involves mounting a component and capturing its rendered HTML output. This output is saved as a snapshot file the first time the test runs. On subsequent runs, the test compares the current output to the saved snapshot. If they match, the test passes, confirming the UI has not changed unexpectedly. If they differ, the test fails, signaling a change in the component's output. Developers can then update the snapshot if the change is intentional or fix the component if it is a bug. This process helps maintain UI consistency and catch unintended changes early.