YUNOVA · Vue.js
Module 9: Testing and quality
Unit testing Vue components with Vitest
Key points
- Vitest runs fast unit tests and works well with Vite projects.
- Vue Test Utils mount a component so you can check its output.
- Trigger events and await updates before checking the DOM.
End-to-end testing a Vue app with Playwright
Key points
- Playwright drives real browsers to test full user flows.
- Locators like getByRole find elements the way users see them.
- expect checks text, visibility and URLs, with automatic waiting.
TypeScript with Vue
Key points
- Use script setup lang="ts" to write components in TypeScript.
- defineProps and defineEmits accept types for props and events.
- vue-tsc checks types across .vue files.
ESLint and Prettier in a Vue project
Key points
- ESLint with eslint-plugin-vue finds bugs and bad patterns.
- Prettier formats code the same way every time.
- Run both on save or before each commit.