Vue JS Vue JS Testing and Debugging

Question 1

Which official Vue library is used to mount and test Vue components in isolation?

Accepted Answer

@vue/test-utils

Answer

@vue/test-utils provides mount() and shallowMount() to render Vue components in a test environment and assert on their output.

Question 2

What is the difference between mount() and shallowMount() in @vue/test-utils?

Accepted Answer

mount() fully renders child components; shallowMount() stubs child components

Answer

shallowMount() replaces all child components with stubs so tests focus on the component under test without being affected by child component behavior.

Question 3

How do you trigger a button click event on a mounted component in @vue/test-utils?

Accepted Answer

wrapper.find('button').trigger('click')

Answer

wrapper.find() locates a DOM element and trigger() dispatches a synthetic DOM event on it, returning a Promise you should await.

Question 4

What does wrapper.vm expose in a @vue/test-utils mounted component?

Accepted Answer

The underlying Vue component instance

Answer

wrapper.vm gives direct access to the component instance, allowing you to read data, call methods, and inspect component state in tests.

Question 5

Which Vitest function is used to replace a module dependency with a test double in Vue unit tests?

Accepted Answer

vi.mock()

Answer

vi.mock() intercepts import calls for a module and replaces its exports with auto-mocked or manually defined fakes for the duration of the test.

Vue JS Practice Test

Vue JS Practice Test

Vue JS Vue JS Testing and Debugging