frontend-testing_skill

Overview

This skill provides practical guidance and patterns for unit and component testing of frontend Svelte code using Vitest and Testing Library. It focuses on co-located .test.ts/.spec.ts files, TDD-friendly workflows, and reliable query and mocking strategies. The goal is fast, maintainable tests that validate behavior, not implementation details.

How this skill works

It prescribes the AAA (Arrange, Act, Assert) pattern for clear, readable tests and shows common patterns from the codebase: pure unit tests, spies for storage and side effects, and lightweight component renders with @testing-library/svelte. It emphasizes accessible queries (role, label, text) and vi.mock for module mocking. Snapshot tests are allowed but discouraged for dynamic content.

When to use it

• Write unit tests for pure utilities and helpers (string/date transformations).
• Create component tests when behavior depends on rendering, user interaction, or DOM queries.
• Mock external modules and API calls with vi.mock to isolate components.
• Use spies to verify caching, storage access, and side-effect suppression.
• Use snapshot tests only for stable, static markup.

Best practices

• Place tests next to implementation as .test.ts or .spec.ts and follow a TDD workflow when adding features or fixing bugs.
• Structure tests explicitly with Arrange, Act, Assert regions for clarity and easy debugging.
• Prefer accessible queries: getByRole, getByLabelText, getByText; use data-testid only as a fallback.
• Clear and reset mocks in beforeEach with vi.clearAllMocks() to avoid cross-test leakage.
• Mock module imports with vi.mock and vi.mocked(...) to control async responses and side effects.
• Avoid assertions against implementation details like class names; assert behavior and accessibility instead.

Example use cases

• Unit-test date utilities to assert time differences and relative units using toBeCloseTo and direct value checks.
• Component test that renders an organization list while mocking the API to return a controlled dataset and asserting items appear with screen.findByText.
• Test cached persisted state by spying on Storage.prototype.getItem to ensure caching prevents repeated reads.
• Validate string helpers handle special characters, empty and null inputs with direct expectations.
• Create a small snapshot test for a static, presentational component and prefer explicit assertions for interactive components.