Introduction to Testing Frameworks
Survey the Vue testing landscape and tooling.
Introduction to Testing Frameworks is a free Vue Academy lesson on CoddyKit — lesson 1 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Why Test?
Automated tests catch bugs before users do, document how your code should behave, and let you refactor with confidence. As an app grows, tests become essential for maintaining quality without manual checking.
Three Kinds of Tests
There are three main test levels: unit tests check small pieces in isolation, integration tests check that pieces work together, and end-to-end (e2e) tests drive the whole app like a real user.
Unit Tests
A unit test verifies a single function or component in isolation, with dependencies mocked. They are fast and pinpoint exactly what broke. Most of your tests should be unit tests.
function add(a, b) {
return a + b
}
test("add sums two numbers", () => {
expect(add(2, 3)).toBe(5)
})Integration Tests
Integration tests check that several units cooperate correctly, for example a component plus its store, or a form that calls an API wrapper. They catch wiring problems units alone miss.
End-to-End Tests
E2e tests launch a real browser and click through your app exactly as a user would. They are the most realistic but also the slowest and most brittle, so you write fewer of them.
The Testing Pyramid
The testing pyramid suggests many fast unit tests at the base, fewer integration tests in the middle, and a small number of e2e tests at the top. This balances confidence with speed.
Vitest
Vitest is a fast, modern test runner built for Vite-based projects. It has a Jest-compatible API and works seamlessly with Vue 3 apps scaffolded by Vite.
npm install -D vitestJest
Jest is a long-established test runner widely used in the JavaScript ecosystem. Vitest mirrors its API (describe, test, expect), so knowledge transfers between them.
describe("math", () => {
test("adds", () => {
expect(1 + 1).toBe(2)
})
})Vue Test Utils
Vue Test Utils is the official library for unit-testing Vue components. It mounts a component in a test environment so you can interact with it and assert on its output.
npm install -D @vue/test-utilsCypress and Playwright
For e2e testing, Cypress and Playwright are popular choices. They automate a real browser, letting you script clicks, typing, and navigation, then assert on what the user sees.
Choosing Your Stack
A typical Vue 3 setup uses Vitest plus Vue Test Utils for unit and component tests, and Cypress or Playwright for e2e. This combination covers the whole pyramid with modern, well-supported tools.
Quick Check
Test your knowledge of testing frameworks.
Recap
Tests come in three levels: unit, integration, and e2e, balanced by the testing pyramid (many unit, few e2e). A modern Vue stack uses Vitest or Jest with Vue Test Utils for units and Cypress or Playwright for e2e. Next you will write real unit tests with Vue Test Utils.
Frequently asked questions
Is the “Introduction to Testing Frameworks” lesson free?
Yes — the full text of “Introduction to Testing Frameworks” is free to read here on the web, and the Vue Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.
What will I learn in “Introduction to Testing Frameworks”?
Survey the Vue testing landscape and tooling. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Vue Academy?
No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 3, so you can start here or from the beginning and move at your own pace.
How long does the “Introduction to Testing Frameworks” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Vue Academy lesson?
Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Introduction to Testing Frameworks
- Unit Testing with Vue Test Utils
- End-to-End Testing