skills.rest
VilnaCRM-Org
VilnaCRM-OrgOFFICIAL
Explore all skills by this author →
GitHub

frontend-testing-workflow

Author Jest, Testing Library, Playwright, and mutation tests for React frontend codebases.

1|Updated Jun 9, 2026
Search Tags:#react#jest#playwright#visual regression#mutation testing#testing library#faker
One-click install
npx skills add https://github.com/VilnaCRM-Org/claude-plugins --skill frontend-testing-workflow-vilnacrm-org
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-testing-workflow
Source: https://github.com/VilnaCRM-Org/claude-plugins/tree/main/plugins/react-frontend-sdlc/skills/frontend-testing-workflow
Command: npx skills add https://github.com/VilnaCRM-Org/claude-plugins --skill frontend-testing-workflow-vilnacrm-org

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Frontend test suites often rely on brittle selectors, unseeded random data, and weak assertions that let bugs and mutants slip through. This Skill standardizes how React/TypeScript tests are authored across unit, integration, E2E, visual, and mutation tiers so suites stay deterministic, accessible, and mutation-proof. ## Core Features & Use Cases - Tiered test authoring: Write Jest unit tests (jsdom client + node server), integration suites with 100% coverage floors, Playwright E2E flows, and visual regression snapshots, all invoked through the project's Makefile target map. - Semantic queries and seeded data: Enforce Testing Library accessible queries (getByRole, getByLabelText) with no data-testid attributes, plus seeded Faker builders for deterministic, domain-valid test data. - Mutation-killing assertions: Strengthen assertions against Stryker mutants by reading mutation diffs and asserting on observable rendered output, keeping MSI at or above the configured break threshold. - Use Case: A developer fixing a bug in a React profile component uses this Skill to add a regression test with a seeded Faker-built user, query the rendered card by role, and verify the new assertion kills the escaped Stryker mutant before merging. ## Quick Start Use the frontend-testing-workflow skill to write a Jest and Testing Library unit test for my ProfileCard component with seeded Faker data and accessible queries.

Frequently Asked Questions about frontend-testing-workflow

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

FAQPage Schema
How do I write React tests without data-testid attributes?▼

Use Testing Library semantic queries in priority order: getByRole with an accessible name, getByLabelText for form inputs, then getByText or getByPlaceholderText. Fall back to a stable id only when no semantic query fits, and fix the component's accessibility if none work.

How to make Faker test data deterministic in Jest and Playwright?▼

Seed Faker via a seedFaker() call in each runner's setup using a default seed, overridable with the FAKER_SEED environment variable. Bind each generated value to a const once and reuse it across inputs and assertions so runs stay reproducible across workers.

How do I kill escaped Stryker mutants in component tests?▼

Read the mutation diff to see what change went undetected, then add the boundary or branch case it exposes, such as an exact-boundary test for a flipped comparison operator. Assert on observable rendered output like text, role, or attributes rather than on function invocation.

When should visual regression snapshots be updated in Playwright?▼

Update snapshots only after inspecting the diff image and confirming the change is intended. Unintended diffs are regressions requiring a component or style fix; never regenerate baselines blind to silence a failing run.

Can I run Jest or Playwright directly instead of through Make targets?▼

No, all suites run through the profile's Makefile target map because the targets wrap the containerized toolchain and package-manager-managed dependencies. A null target means the capability is absent and should be skipped with a note, not improvised.

Related Skills

Explore More Software Engineering Skills→
congiuluccongiuluc

testing-frontend

Write Vitest and React Testing Library tests for React components and hooks.

Community
Intermediate
robotijnrobotijn
3

coverage-enforcer

Parse cross-format coverage reports to enforce branch and diff thresholds and gate merges.

Community
Advanced
VMRam95VMRam95

web-design-guidelines

Audit React and HTML code for WCAG accessibility and Vercel design compliance.

Community
Intermediate
elasticelastic
21.2k

enzyme-to-rtl

Migrate Enzyme tests to React Testing Library by converting imports, renders, selectors, and assertions.

Official
Intermediate