vue-testing-best-practices

Install vitest, @vue/test-utils, and happy-dom, then configure the test environment in vite.config.js. Mount components with mount(), simulate interactions with awaited trigger() calls, and assert on rendered output and emitted events.

This error occurs when components using Pinia stores are mounted without an active Pinia instance. Use createTestingPinia from @pinia/testing in the global plugins option for component tests, or call setActivePinia(createPinia()) in beforeEach for store unit tests.

Components with async setup must be wrapped in a Suspense boundary during testing. Create a wrapper component containing Suspense, mount it, then call await flushPromises() before making assertions on the resolved component via findComponent().

Playwright offers full cross-browser support including WebKit, built-in parallelization, and is fully open source. Cypress has limited WebKit support and requires paid subscriptions for some features, making Playwright the recommended choice for new Vue E2E setups.

Vue updates the DOM asynchronously, so assertions may run before updates complete. Always await trigger() and setValue() calls, use nextTick for reactive state changes, and use flushPromises for external async operations like API calls.

No, wrapper.find() cannot locate teleported content because it renders outside the component's DOM tree. Stub Teleport in unit tests, or mount with attachTo document.body and query the real DOM for integration tests.