chrome-ext-testing

Chrome Extension Testing

Extension testing spans three tiers: unit tests for pure logic, integration tests for messaging/storage/UI, and E2E tests for multi-context journeys. Vitest with @webext-core/fake-browser handles the first two. Playwright handles E2E with real browser contexts.

Framework Selection

Tier	Framework	Why
Unit	Vitest	Fast, Vite-native, works with WXT
Integration	Vitest Browser Mode	Real browser DOM for authentic behavior
E2E	Playwright	Isolated browser contexts, Shadow DOM piercing

Unit Testing

Test pure logic, utilities, and API-mocked code with @webext-core/fake-browser:

// vitest.config.ts
import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    setupFiles: ['./test/setup.ts'],
  },
});

// test/setup.ts
import { fakeBrowser } from '@webext-core/fake-browser';
vi.stubGlobal('browser', fakeBrowser);
vi.stubGlobal('chrome', fakeBrowser);

What to test:

• Algorithms, formatting helpers, data transformers
• Storage read/write logic (fake-browser polyfills chrome.storage)
• Message routing logic (fake-browser polyfills chrome.runtime)
• Utility functions

import { describe, it, expect } from 'vitest';

describe('storage utils', () => {
  it('reads with defaults', async () => {
    const result = await chrome.storage.local.get({ theme: 'light' });
    expect(result.theme).toBe('light');
  });

  it('persists and retrieves data', async () => {
    await chrome.storage.local.set({ count: 42 });
    const { count } = await chrome.storage.local.get('count');
    expect(count).toBe(42);
  });
});

Integration Testing

Test UI interactions, messaging, and storage flows:

• Use Vitest Browser Mode for authentic DOM/CSS behavior
• Test loading, error, and empty states
• Test keyboard navigation and accessibility
• Mock external APIs and network requests

describe('Popup', () => {
  it('loads settings from storage', async () => {
    await chrome.storage.local.set({ theme: 'dark' });
    render(<Popup />);
    expect(screen.getByRole('button', { name: /dark/i })).toBeInTheDocument();
  });

  it('saves settings on change', async () => {
    render(<Popup />);
    fireEvent.click(screen.getByRole('button', { name: /toggle/i }));
    const { theme } = await chrome.storage.local.get('theme');
    expect(theme).toBe('dark');
  });
});