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

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