Learn Nuxt - Testing & Quality

#Introduction

The bigger an application gets, the more expensive bugs found in production become. Episode 16 covers how to maintain quality with testing: unit tests for pure logic, component tests for component behavior, and end-to-end tests for complete user flows.

We'll use Vitest as the test runner and Playwright for E2E — both live in the same ecosystem as Nuxt, so integration is seamless. Combined with type checking and linting, you'll have a safety net that catches problems before they reach users.

#Unit Testing with Vitest

#Setting Up Vitest for Nuxt

Install Vitest and Nuxt's test utility module:

npm install --save-dev vitest @vue/test-utils @nuxt/test-utils

Add a test script in package.json:

Script test

{
  "scripts": {
    "test": "vitest run"
  }
}

#Writing Your First Unit Test

Start with pure logic — the easiest thing to test. Take a store getter or util function:

test/hitung-total.test.ts

import { describe, expect, it } from "vitest"
 
function hitungTotal(harga: number[], diskon: number) {
  const dasar = harga.reduce((a, b) => a + b, 0)
  return dasar - (dasar * diskon) / 100
}
 
describe("hitungTotal", () => {
  it("menghitung total tanpa diskon", () => {
    expect(hitungTotal([100000, 50000], 0)).toBe(150000)
  })
 
  it("menerapkan diskon persen", () => {
    expect(hitungTotal([100000], 10)).toBe(90000)
  })
})

describe and it group and define test cases, expect checks the result. Run them with:

npm test

Unit tests like these run fast and can be run again and again — they're the foundation of your testing pipeline.

#Component Testing with Vue Test Utils

#Rendering Components in Tests

Vue Test Utils lets you render components in a test environment. Test the KartuProduk component:

test/kartu-produk.test.ts

import { describe, expect, it } from "vitest"
import { mount } from "@vue/test-utils"
import KartuProduk from "~/components/KartuProduk.vue"
 
describe("KartuProduk", () => {
  it("menampilkan nama dan harga", () => {
    const wrapper = mount(KartuProduk, {
      props: { nama: "Sneakers", harga: 250000 },
    })
 
    expect(wrapper.text()).toContain("Sneakers")
    expect(wrapper.text()).toContain("250000")
  })
})

mount(KartuProduk, { props: {...} }) renders the component with specific props, then wrapper.text() checks the displayed content. Component tests are very useful for catching regressions in frequently changing UIs.

#Integration Testing and E2E Testing with Playwright

#Setting Up Playwright

Install Playwright, then prepare the browser:

npm install --save-dev @playwright/test
npx playwright install chromium

#An E2E Purchase Flow Test

E2E tests a flow like a real user: open a page, click, fill a form, and check the result:

e2e/beli.spec.ts

import { expect, test } from "@playwright/test"
 
test("pengguna bisa checkout", async ({ page }) => {
  await page.goto("/produk")
  await page.getByRole("button", { name: "Beli" }).first().click()
  await page.goto("/keranjang")
  await expect(page.getByText("Sneakers")).toBeVisible()
})

This test runs the real application in a browser. page.getByRole and page.getByText select elements the way users and screen readers find them — a pattern that also strengthens accessibility.

#Running E2E

Playwright needs a running server. It's usually run after a production build:

npm run build
npx playwright test

This pattern verifies that the production application actually works — not just that code compiles.

#Static Analysis and Type Checking

#Automatic Type Checking

Nuxt already uses TypeScript, but type checks only run when explicitly invoked. Make it part of your routine:

npx nuxi typecheck

Run npx nuxi typecheck before every merge to catch type errors early. Pair it with ESLint from episode 3 so both code style and types are monitored at once.

#Making It Part of CI

Tests that aren't run automatically get forgotten. Episode 19 will wire these steps into CI/CD so every pull request is tested automatically.

#Conclusion

Episode 16 completes your quality safety net: unit tests with Vitest for pure logic, component tests with Vue Test Utils for component behavior, E2E tests with Playwright for complete user flows, plus integrated type checking and linting.

Key takeaways:

• Vitest and @nuxt/test-utils are the primary choices for the Nuxt test runner.
• Unit tests for pure logic, component tests for UI behavior.
• Playwright tests real user flows in a browser.
• Role-based selectors strengthen accessibility and testing at once.
• Run npx nuxi typecheck and ESLint regularly.
• Integrate all tests into CI so none are skipped.

In the next episode, episode 17, we will discuss accessibility and UX — ARIA support, keyboard navigation and focus management, semantic HTML with accessible components, responsive design with adaptive layouts, and the basics of internationalization. Your store will be friendly to every user.