Single-Page Application (SPA) Testing Guide

Single-page apps (SPAs) replace server-rendered HTML with client-side routing and JavaScript-heavy UI. They need different testing strategies than traditional web apps. This guide covers the concerns

Single-page apps (SPAs) replace server-rendered HTML with client-side routing and JavaScript-heavy UI. They need different testing strategies than traditional web apps. This guide covers the concerns unique to SPAs and how to address them.

What makes SPAs tricky

• Client-side routing (pushState, no page reloads)
• Async data loading
• State hydration from server-rendered snapshots (some SPAs)
• Service workers may cache aggressively
• SEO considerations (crawlers see empty shell)
• Bundle loading / lazy chunks

Test tiers

Unit

React / Vue / Angular components with Jest, Vitest, Jasmine. Fast, no browser.

Integration

Component trees with React Testing Library or Vue Test Utils. Mock API, assert rendered output.

E2E

Playwright / Cypress. Real browser, real bundle, real API (or realistic mock).

Visual regression

Percy / Applitools / Chromatic. Snapshot each route / state.

Routing

Test every route

Navigation works:

test('navigates to user profile', async ({ page }) => {
  await page.goto('/');
  await page.click('text=Profile');
  expect(page.url()).toMatch(/\/profile/);
});

Browser back / forward

await page.click('text=Profile');
await page.click('text=Settings');
await page.goBack();
expect(page.url()).toMatch(/\/profile/);

Deep link

Direct URL navigation should work:

await page.goto('/user/123');
// Assert page loaded, data fetched

State management

Redux / Zustand / Pinia / Vuex

Test stores in isolation (unit tests). Integration: mount component, dispatch actions, assert state.

URL as state

Filters, pagination in URL params. Test: change filter → URL updates → reload → same state.

Data loading

Loading states

Every async boundary has loading UI. Test: mock slow API, assert spinner shown.

Error states

API returns 500 → user sees error with retry.

Empty states

No data → meaningful empty state.

Stale data

Cache then navigate away / back. Is cached data shown or refetched?

Authentication

Login / logout routes

Protected routes redirect to login. After login, redirect to intended destination.

Token refresh

Silent refresh mid-navigation works.

Session expiry mid-use

Graceful handling.

SEO

SPAs need special SEO consideration:

• Server-side rendering (SSR) via Next.js, Nuxt, SvelteKit, Remix
• Static site generation (SSG) for content pages
• Prerender for crawlers (Rendertron)

Test: curl https://myapp.com | grep "