Back
VueMediumNew
How would you test a Vue component? What tools are commonly used?
Vitest + Vue Test Utils, Cypress/Playwright for E2E
Ideal Answer
Common testing layers for Vue apps:
- Unit/component tests: Vitest (fast, Vite-native test runner) paired with Vue Test Utils to mount components and assert on rendered output, emitted events, and props.
JavaScript
import { mount } from '@vue/test-utils'
import Counter from './Counter.vue'
test('increments on click', async () => {
const wrapper = mount(Counter)
await wrapper.find('button').trigger('click')
expect(wrapper.text()).toContain('1')
})
- End-to-end tests: Cypress or Playwright to simulate real user flows across the full running app in a browser.
Composables can also be unit tested directly as plain functions, since they don't require mounting a component.