skills.rest
TimeKast
TimeKastOFFICIAL
Explore all skills by this author →
WebsiteGitHub

kb-testing-patterns

Enforce AAA, FIRST, and RTL rules across Vitest, RTL, and Playwright tests.

Updated May 19, 2026
Search Tags:#vitest#testing#playwright#mocking#test-design#rtl#react-testing-library
One-click install
npx skills add https://github.com/TimeKast/AgendaInteligente --skill kb-testing-patterns
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: kb-testing-patterns
Source: https://github.com/TimeKast/AgendaInteligente/tree/main/.claude/skills/kb-testing-patterns
Command: npx skills add https://github.com/TimeKast/AgendaInteligente --skill kb-testing-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents flaky, shallow, and inconsistent test suites by giving a repo-specific, universal set of testing principles across the unit, component, and E2E layers.

Core Features & Use Cases

  • 3-layer testing pyramid guidance: Defines what belongs in Unit vs Component (RTL) vs E2E (Playwright) and why this repo uses a 3-layer structure.
  • AAA and FIRST test structure: Standardizes how to arrange, act, and assert and how to keep tests fast, isolated, repeatable, self-checking, and timely.
  • RTL interaction and querying rules: Recommends role-first queries, uses userEvent over fireEvent, and avoids shallow/empty assertions.
  • Mocking and server-action test strategy: Clarifies when to mock external services and how to test server actions at the Unit tier using Drizzle factory-function mocks.
  • Test data patterns and anti-patterns: Covers fixtures/factories/builders, minimal realistic data, and common mistakes to avoid.

Quick Start

Use kb-testing-patterns when you are writing or reviewing tests to ensure your Unit, RTL component, and Playwright E2E coverage follows consistent structure, interaction, and mocking rules.

Frequently Asked Questions about kb-testing-patterns

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

FAQPage Schema
How do I structure reliable Vitest unit tests in a Next.js stack?▼

Structure Vitest unit tests using the AAA pattern (Arrange, Act, Assert) and FIRST principles to keep tests fast, isolated, repeatable, and timely. This enforces behavior-focused assertions and disciplined setup and cleanup for reliable unit testing.

When should I use React Testing Library role queries over test IDs?▼

Use React Testing Library role-first queries to select elements the way users interact with them. This querying strategy avoids shallow assertions and ensures component tests reflect real user behavior rather than internal implementation details.

What is the best way to mock server actions and external services in tests?▼

Mock external services and server actions at the Unit tier using Drizzle factory-function mocks. This strategy isolates behavior and prevents flaky tests caused by live database or network dependencies during test execution.

How do I decide between writing a Vitest unit test or a Playwright E2E test?▼

Decide based on the 3-layer testing pyramid: use Vitest for unit logic, React Testing Library for component interactions, and Playwright E2E for full user flows. This structure defines what belongs in each layer to maximize coverage and minimize test flakiness.

Why are my component tests flaky and how do I fix them?▼

Component tests become flaky due to inconsistent test selection, shallow assertions, and improper mocking. Fix them by using RTL role-first queries, userEvent over fireEvent, and minimal realistic fixture data to ensure repeatable, isolated test execution.

Related Skills

Explore More Software Engineering Skills→
lucidlabs-hqlucidlabs-hq
2

test-setup

Initialize Vitest and Playwright testing infrastructure from upstream configs.

Official
Intermediate
mvillmowmvillmow
18

quality-coverage-report

Generate HTML and terminal coverage reports for Python pytest runs.

Community
Intermediate
PackmindHubPackmindHub
306

test-factory-patterns

Generate varied mock data for Packmind TypeScript test factory functions.

Official
Intermediate
eleva-labseleva-labs

test

Set up and run frontend tests with Jest, Vitest, Playwright, or Cypress.

Official
Intermediate