Vue JS Vue JS Testing and Debugging 2 — Questions and Answers
Question 1: How do you test that a Vue component emits the correct custom event with @vue/test-utils?
- Check wrapper.props().emitted
- Use wrapper.emitted() to inspect emitted events and their arguments (Correct answer)
- Read the events from wrapper.html()
- Use wrapper.find('emit').text()
Correct answer: Use wrapper.emitted() to inspect emitted events and their arguments
wrapper.emitted() returns an object where each key is an event name and the value is an array of argument arrays for each emission.
Question 2: What Vue DevTools panel shows a log of all Vuex or Pinia store mutations over time?
- Components tree
- Timeline / State mutations log (Correct answer)
- Network inspector
- Console panel
Correct answer: Timeline / State mutations log
The Vue DevTools Timeline tab records every Vuex commit or Pinia action with timestamps and state snapshots, enabling time-travel debugging.
Question 3: How do you test a Vue composable (Composition API function) without mounting a full component?
- Composables must be tested inside a component
- Wrap the call in withSetup() or call it directly if it has no lifecycle dependencies (Correct answer)
- Use the Options API wrapper pattern only
- Run composables in a Web Worker for isolation
Correct answer: Wrap the call in withSetup() or call it directly if it has no lifecycle dependencies
Simple composables with no lifecycle hooks can be called directly in tests; for those needing lifecycle context, a helper app/component wrapper provides the correct Vue instance.
Question 4: What does the errorCaptured lifecycle hook do in Vue?
- Catches JavaScript syntax errors at compile time
- Intercepts errors thrown by descendant components and prevents them from propagating further (Correct answer)
- Logs network errors from fetch calls
- Restarts the component instance after a crash
Correct answer: Intercepts errors thrown by descendant components and prevents them from propagating further
errorCaptured fires when an error propagates from a child component; returning false stops the error from bubbling further up the component tree.
Question 5: Which Vue 3 global API allows you to register a handler for unhandled errors from any component?
- app.config.warnHandler
- app.config.errorHandler (Correct answer)
- app.use(errorPlugin)
- Vue.onError()
Correct answer: app.config.errorHandler
app.config.errorHandler receives all unhandled errors from component lifecycle hooks, watchers, and event handlers throughout the application.
Question 6: How do you provide a mock value for a dependency injected with inject() in a unit test?
- Pass it as a component prop in mount()
- Use the global.provide option in mount() to supply mock values at the test root (Correct answer)
- Overwrite the inject() function globally
- Injected values cannot be mocked in tests
Correct answer: Use the global.provide option in mount() to supply mock values at the test root
The global.provide option in @vue/test-utils mount() makes the specified values available to inject() calls throughout the component tree under test.
Vue JS Vue JS Testing and Debugging 2
How do you test that a Vue component emits the correct custom event with @vue/test-utils?