Vue JS Vue JS Testing and Debugging 1 — Questions and Answers
Question 1: Which official Vue library is used to mount and test Vue components in isolation?
- vue-test-utils
- @vue/test-utils (Correct answer)
- vue-jest
- vitest-vue
Correct answer: @vue/test-utils
@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?
- mount() is for Vue 3; shallowMount() is for Vue 2
- mount() fully renders child components; shallowMount() stubs child components (Correct answer)
- shallowMount() runs faster because it uses SSR
- mount() requires a real browser; shallowMount() runs in Node
Correct answer: mount() fully renders child components; shallowMount() stubs child components
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?
- wrapper.click()
- wrapper.find('button').trigger('click') (Correct answer)
- wrapper.emit('click')
- wrapper.get('button').fire('click')
Correct answer: wrapper.find('button').trigger('click')
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?
- The raw HTML string of the component
- The underlying Vue component instance (Correct answer)
- The component's compiled render function
- The virtual DOM node tree
Correct answer: The underlying Vue component instance
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?
- vitest.stub()
- vi.mock() (Correct answer)
- vitest.replace()
- vi.spy()
Correct answer: vi.mock()
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.
Question 6: What is the purpose of nextTick() in Vue component tests?
- Delays test execution by one second
- Waits for Vue to finish processing pending DOM updates before assertions run (Correct answer)
- Triggers the next animation frame
- Flushes all pending Axios requests
Correct answer: Waits for Vue to finish processing pending DOM updates before assertions run
Vue batches DOM updates asynchronously; awaiting nextTick() ensures the DOM has been updated before you query or assert on it in tests.
Vue JS Vue JS Testing and Debugging 1
Which official Vue library is used to mount and test Vue components in isolation?