What to Unit Test in a Vue App (And What Not to Touch)

Source: Dev.to

Unit testing is often treated as a checkbox on a project’s checklist. Teams either try to test everything or avoid tests altogether because they feel slow, brittle, or hard to maintain.
In Vue applications, the real challenge isn’t how to write unit tests — it’s what is actually worth testing.

Testing the wrong things leads to fragile tests, constant refactoring pain, and a false sense of confidence. Testing the right things creates a safety net that enables refactoring, faster development, and long‑term maintainability.

What to Unit Test in a Vue App

Business Logic and Pure Functions

Anything that contains decision‑making logic is a prime candidate for unit testing.

• Price calculations
• Validation rules
• Permission checks
• Data transformations
• Formatting logic

If it’s a pure function with inputs and outputs, it should almost always be tested.

function calculateDiscount(price: number, isPremium: boolean) {
  return isPremium ? price * 0.8 : price
}

Composables

Composables that encapsulate logic — not just re‑export state — are excellent testing targets.

import { computed } from 'vue'

export function useUserAccess(user) {
  return computed(() => user.role === 'admin')
}

Good candidates include data‑fetching composables, state machines, feature‑flag logic, and complex reactive flows.

Stores

Stores often encode business rules, so you should test:

• Actions that modify state
• Getters with logic
• Error‑handling paths
• Side‑effect orchestration

You usually don’t need to test simple state assignments or trivial getters that just return a value.

Test Behavior, Not Implementation Details

Focus on observable outcomes such as:

• Error states
• Empty data
• Invalid input
• Boundary conditions

These scenarios often break silently in production and are hardest to reason about without tests.

What Not to Unit Test

Vue Internals and Framework Behavior

You don’t need to test:

• That v‑if works
• That v‑model updates correctly
• That reactivity updates the DOM
• That lifecycle hooks are called

Vue already guarantees these behaviors. Testing them adds noise without value.

Avoid Over‑Specific UI Assertions

Do not assert:

• Exact HTML structure
• CSS classes unless they affect logic
• Pixel‑perfect rendering

These tests are brittle and break on harmless refactors. If visual fidelity matters, consider visual testing, snapshot testing (sparingly), or end‑to‑end tests.

Components with No Logic

If a component:

• Only wires props to children
• Contains no branching behavior
• Has no internal logic

…it usually doesn’t need unit tests. Integration or E2E tests cover these cases more effectively.

Avoid Coupling to Internal Implementation

Do not depend on:

• Internal variable names
• Specific reactive structures
• Internal refs or watchers

Good tests verify observable behavior, not how that behavior is implemented.

A Balanced Vue Testing Strategy

• Unit tests protect business logic and edge cases.
• Integration tests verify collaboration between components.
• End‑to‑end tests safeguard user flows.

Ask yourself for each test:

1. Would this test fail if the behavior broke?
2. Would this test survive a refactor?
3. Does this test increase confidence or just inflate coverage?

High‑value tests are focused, stable, and intentional.
Low‑value tests are fragile, redundant, and framework‑dependent.

The goal isn’t maximum coverage—it’s maximum confidence per test written.

Unit testing in Vue is not about testing everything — it’s about testing the right things. Well‑chosen tests enable confidence and speed. Test intentionally — your future self will thank you.

Happy coding! 🖥️