Vitest Testing

Unit testing TypeScript/JavaScript code with Vitest for the Oh My Brand! WordPress FSE theme.

When to Use

• Writing unit tests for Web Components
• Testing utility functions (debounce, throttle, etc.)
• Mocking browser APIs (IntersectionObserver, matchMedia)
• Achieving code coverage requirements

Configuration

Test Templates

Test Structure

import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';

describe('ComponentName', () => {
    let element: HTMLElement;

    beforeEach(() => {
        document.body.innerHTML = `<my-component></my-component>`;
        element = document.querySelector('my-component')!;
    });

    afterEach(() => {
        document.body.innerHTML = '';
    });

    it('should initialize correctly', () => {
        expect(element).toBeDefined();
    });
});

Mock Patterns Quick Reference

Mock Functions

const mockFn = vi.fn();
mockFn.mockReturnValue('value');
mockFn.mockResolvedValue({ data: [] });
expect(mockFn).toHaveBeenCalledWith('arg');

Mock Timers

vi.useFakeTimers();
vi.advanceTimersByTime(100);
vi.useRealTimers();

Spy on Methods

const spy = vi.spyOn(object, 'method');
spy.mockReturnValue('mocked');
expect(spy).toHaveBeenCalled();

See mocking-patterns.ts for complete examples.

Coverage

Thresholds

What to Test

Always test:

• Public methods and functions
• Edge cases (empty arrays, null values)
• Error handling paths
• User interactions
• Attribute change callbacks

Don't test:

• Third-party library internals
• Private implementation details
• Simple getters/setters

Running Tests

pnpm test

pnpm run test:watch

pnpm run test:coverage

pnpm test -- --testNamePattern="nav"

pnpm test src/blocks/gallery/

Related Skills

• typescript-standards - TypeScript conventions
• web-components - Web Component patterns
• phpunit-testing - PHP unit testing
• playwright-testing - E2E testing

References

• Vitest Documentation
• Testing Library
• Web Components Testing