Snapshot testing in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this Vue snapshot test verify?

Consider this Vue component snapshot test. What aspect of the component does it check?

Vue

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

test('MyButton matches snapshot', () => {
  const wrapper = mount(MyButton, { props: { label: 'Click me' } });
  expect(wrapper.html()).toMatchSnapshot();
});

A It checks that the rendered HTML output of MyButton stays the same over time.

B It verifies that the MyButton component emits a click event when clicked.

C It tests that the MyButton component updates its label prop correctly.

D It ensures that the MyButton component's methods are called during rendering.

💡 Hint

Snapshot tests compare the rendered output to a saved version.

Snapshot testing captures the HTML output of a component and compares it to a saved snapshot file. This helps detect unexpected changes in the UI.

📝 Syntax

intermediate

Which option correctly updates a Vue snapshot test after intentional UI changes?

You updated the MyButton component's template. How do you update the snapshot test to accept the new output?

Vue

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

test('MyButton matches snapshot', () => {
  const wrapper = mount(MyButton, { props: { label: 'Press me' } });
  expect(wrapper.html()).toMatchSnapshot();
});

A Run the test with the --updateSnapshot flag to refresh the stored snapshot.

B Manually edit the snapshot file to match the new output HTML.

C Delete the snapshot file and rerun the test normally.

D Change expect(wrapper.html()).toEqual(newHtmlString) with the new HTML.

💡 Hint

Testing tools often have a flag to update snapshots automatically.

Using the --updateSnapshot flag tells the test runner to replace the old snapshot with the new output, keeping tests in sync with intentional changes.

🔧 Debug

advanced

Why does this Vue snapshot test fail unexpectedly?

This snapshot test fails even though the component code did not change. What is the likely cause?

Vue

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

test('ClockDisplay matches snapshot', () => {
  const wrapper = mount(ClockDisplay);
  expect(wrapper.html()).toMatchSnapshot();
});

// ClockDisplay shows current time dynamically.

A The test is missing an await for asynchronous rendering.

B The snapshot file is corrupted and cannot be read.

C The mount function is missing required props causing render errors.

D The component renders dynamic content (current time) that changes every test run.

💡 Hint

Snapshot tests expect consistent output, but dynamic data can cause mismatches.

If a component renders changing data like the current time, the snapshot will differ each run, causing failures. Mocking or freezing time is needed.

❓ state_output

advanced

What is the snapshot test output after this state change?

Given this Vue component and test, what will the snapshot contain after clicking the button?

Vue

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

const Counter = {
  template: `<button @click="count++">Count: {{ count }}</button>`,
  setup() {
    const count = ref(0);
    return { count };
  }
};

test('Counter snapshot after click', async () => {
  const wrapper = mount(Counter);
  await wrapper.trigger('click');
  expect(wrapper.html()).toMatchSnapshot();
});

A <button>Count: 0</button>

B <button>Count: 1</button>

C <button>Count: </button>

D <button>Count: undefined</button>

💡 Hint

Clicking the button increases the count by 1 before snapshot.

The button starts at 0. After the click event, count increments to 1. The snapshot captures the updated HTML showing 'Count: 1'.

🧠 Conceptual

expert

Why should snapshot tests be used carefully with Vue components?

Which reason best explains a limitation of snapshot testing Vue components?

A Snapshots do not check if component methods are called correctly during events.

B Snapshots cannot be used with Vue components that use the Composition API.

C Snapshots can break easily with minor style or markup changes, causing noisy test failures.

D Snapshots require manual updates for every prop change, making tests slow to write.

💡 Hint

Think about how small UI changes affect snapshot tests.

Snapshot tests are sensitive to any change in rendered output, including formatting or style tweaks, which can cause many test failures even if functionality is fine.

Practice

1. What is the main purpose of snapshot testing in Vue component testing?

easy

A. To test the component's methods and computed properties

B. To save the component's rendered HTML and detect unexpected UI changes

C. To check the component's CSS styles for correctness

D. To verify the component's event handlers are called

Solution

1. Step 1: Understand snapshot testing purpose

   Snapshot testing captures the rendered HTML output of a component to detect changes over time.

2. Step 2: Compare with other testing types

   Unlike method or event testing, snapshot testing focuses on UI structure, not behavior or styles.

3. Final Answer:

   To save the component's rendered HTML and detect unexpected UI changes -> Option B

4. Quick Check:

   Snapshot testing = UI output check [OK]

Hint: Snapshot testing checks UI output changes visually [OK]

Common Mistakes:

• Confusing snapshot testing with unit testing methods
• Thinking it tests CSS or events directly
• Assuming it tests component logic

2. Which of the following is the correct way to write a snapshot test for a Vue component using @vue/test-utils?

easy

A. expect(mount(MyComponent).html()).toMatchSnapshot()

B. expect(shallowMount(MyComponent).text()).toMatchSnapshot()

C. expect(mount(MyComponent).vm).toMatchSnapshot()

D. expect(renderToString(MyComponent)).toBeSnapshot()

Solution

1. Step 1: Identify correct mounting and snapshot method

   Using mount from @vue/test-utils and calling html() returns the rendered HTML string.

2. Step 2: Match snapshot with Jest matcher

   toMatchSnapshot() is the correct Jest matcher to compare the HTML output to the saved snapshot.

3. Final Answer:

   expect(mount(MyComponent).html()).toMatchSnapshot() -> Option A

4. Quick Check:

   mount + html() + toMatchSnapshot() = correct syntax [OK]

Hint: Use mount().html() with toMatchSnapshot() for Vue snapshots [OK]

Common Mistakes:

• Using shallowMount instead of mount when full HTML is needed
• Trying to snapshot the component instance (vm) instead of HTML
• Using incorrect matcher like toBeSnapshot()

3. Given this test code snippet, what will happen when the component's HTML changes unexpectedly?

import { mount } from '@vue/test-utils'
import MyComponent from './MyComponent.vue'
test('renders correctly', () => {
  const wrapper = mount(MyComponent)
  expect(wrapper.html()).toMatchSnapshot()
})

medium

A. The test will fail indicating the snapshot does not match the new HTML

B. The test will pass regardless of HTML changes

C. The test will throw a syntax error

D. The test will update the snapshot automatically

Solution

1. Step 1: Understand snapshot comparison behavior

   When the component's HTML changes, Jest compares the new output to the saved snapshot and detects differences.

2. Step 2: Result of mismatch

   If the HTML differs unexpectedly, the test fails to alert the developer about the change.

3. Final Answer:

   The test will fail indicating the snapshot does not match the new HTML -> Option A

4. Quick Check:

   Snapshot mismatch causes test failure [OK]

Hint: Snapshot test fails if UI output changes unexpectedly [OK]

Common Mistakes:

• Assuming tests auto-update snapshots without command
• Thinking test passes even if HTML changes
• Confusing syntax errors with snapshot failures

4. You wrote this snapshot test but it always fails with an error:

expect(wrapper.html().toMatchSnapshot())

What is the problem and how to fix it?

medium

A. toMatchSnapshot() is not a valid Jest matcher; fix by using toEqualSnapshot()

B. wrapper.html() returns undefined; fix by using wrapper.text() instead

C. Missing import of toMatchSnapshot from Jest; fix by importing it explicitly

D. toMatchSnapshot() should be called on expect(), not on the string; fix: expect(wrapper.html()).toMatchSnapshot()

Solution

1. Step 1: Identify incorrect method chaining

   The code calls toMatchSnapshot() on the string result of wrapper.html(), which is incorrect.

2. Step 2: Correct usage of Jest matcher

   The matcher toMatchSnapshot() must be called on the expect() wrapper, not on the string itself.

3. Final Answer:

   toMatchSnapshot() should be called on expect(), not on the string; fix: expect(wrapper.html()).toMatchSnapshot() -> Option D

4. Quick Check:

   Call matcher on expect() result [OK]

Hint: Call toMatchSnapshot() on expect(), not on string [OK]

Common Mistakes:

• Calling matcher on string instead of expect()
• Using wrong matcher name
• Assuming wrapper.html() returns undefined

5. You have a Vue component that conditionally renders a button based on a prop. You want to snapshot test both states (button shown and hidden). How should you write your tests to handle this correctly?

hard

A. Write a test that updates the snapshot manually after each prop change

B. Write one test mounting the component without props and snapshot it once

C. Write two separate tests, each mounting the component with different prop values, and snapshot each output

D. Write one test mounting the component with both prop values at once and snapshot the combined output

Solution

1. Step 1: Understand conditional rendering impact

   The component's output changes based on the prop, so each state has a different HTML structure.

2. Step 2: Write separate snapshot tests per state

   Mount the component twice with different prop values and snapshot each output separately to catch changes in both states.

3. Final Answer:

   Write two separate tests, each mounting the component with different prop values, and snapshot each output -> Option C

4. Quick Check:

   Separate snapshots for different states [OK]

Hint: Test each UI state separately with its own snapshot [OK]

Common Mistakes:

• Trying to snapshot multiple states in one test
• Not passing props to trigger conditional rendering
• Updating snapshots without verifying changes