vitest-testing

name	vitest-testing
description	Vitest unit testing for TypeScript/JavaScript in Oh My Brand! theme. Test setup, Web Component testing, mocking patterns, and coverage. Use when writing unit tests for frontend code.
metadata	{"author":"Wesley Smits","version":"1.0.0"}

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

File	Template	Purpose
vitest.config.ts	Vitest configuration	Test settings and coverage
setup.ts	Test setup	Browser API mocks

---

Test Templates

Template	Purpose
web-component.test.ts	Web Component tests
debounce.test.ts	Utility function tests
mocking-patterns.ts	Mocking examples

---

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

Metric	Threshold
Statements	80%
Branches	80%
Functions	80%
Lines	80%

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

Command	Purpose
pnpm test	Run all tests
pnpm run test:watch	Watch mode
pnpm run test:coverage	With coverage
pnpm test -- --testNamePattern="nav"	Filter by name
pnpm test src/blocks/gallery/	Specific directory

---

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