frontend-testing-patterns

Guide frontend testing patterns for SolidJS and Vitest with Testing Trophy.

Updated Jun 15, 2025
One-click install
npx skills add https://github.com/patrickhaahr/dotfiles --skill frontend-testing-patterns-patrickhaahr
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-testing-patterns
Source: https://github.com/patrickhaahr/dotfiles/tree/main/opencode/.config/opencode/skills/frontend-testing-patterns
Command: npx skills add https://github.com/patrickhaahr/dotfiles --skill frontend-testing-patterns-patrickhaahr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill consolidates Testing Trophy-inspired frontend testing guidelines into a cohesive, expert reference to help teams write reliable tests, review test suites, and accelerate test setup.

Core Features & Use Cases

  • Framework-specific guidance for SolidJS with Vitest and Testing Library.
  • Test distribution guidance across Static, Unit, Integration, and E2E with practical anti-patterns.
  • Practical workflows for auditing, refactoring, and scaling test suites in real projects.

Quick Start

Audit a SolidJS component with Vitest and Testing Library, then implement a starter test suite that follows the Testing Trophy distribution.

Frequently Asked Questions about frontend-testing-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure frontend tests using the Testing Trophy methodology?

The Testing Trophy methodology prioritizes static analysis, integration, and unit tests over end-to-end tests. This skill provides framework-aware guidelines to distribute tests across these layers, ensuring deterministic, fast, and maintainable test suites for frontend components.

What's the best way to set up Vitest and Testing Library for a SolidJS component?

You can audit a SolidJS component and implement a starter test suite using Vitest and Testing Library. This skill offers framework-specific guidance and practical workflows to bootstrap tests that scale in real-world projects.

How do mocking strategies work for frontend testing in SolidJS?

Mocking strategies in SolidJS isolate components from external dependencies for deterministic testing. This skill supports framework-specific mocking patterns with Vitest to ensure your tests remain fast and maintainable across components and hooks.

Does this frontend testing approach support auditing and refactoring existing test suites?

Yes, this approach supports auditing and refactoring existing test suites. It provides practical workflows for evaluating and scaling tests, helping teams review their current setup and apply Testing Trophy distribution patterns effectively.

Why does my frontend test suite lack maintainability and speed?

Your test suite may lack maintainability due to improper test distribution or inadequate mocking strategies. This skill addresses these issues by providing structured guidelines based on the Testing Trophy to ensure tests are fast and scalable.

When should I avoid end-to-end tests in favor of integration tests?

You should avoid excessive end-to-end tests when integration tests provide sufficient coverage with better speed and determinism. This skill outlines practical anti-patterns and test distribution guidance to help balance your frontend testing strategy effectively.