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.