vitest-testing

# 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](references/vitest.config.ts) | Vitest configuration | Test settings and coverage | | [setup.ts](references/setup.ts) | Test setup | Browser API mocks | --- ## Test Templates | Template | Purpose | |----------|---------| | [web-component.test.ts](references/web-component.test.ts) | Web Component tests | | [debounce.test.ts](references/debounce.test.ts) | Utility function tests | | [mocking-patterns.ts](references/mocking-patterns.ts) | Mocking examples | --- ## Test Structure ```typescript 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 ```typescript const mockFn = vi.fn(); moc...