skills.rest
datamonsterr
datamonsterrCOMMUNITY
Explore all skills by this author →
GitHub

typescript-testing

Automate React frontend tests with Vitest and Playwright for the MycoAI project.

Updated Apr 12, 2026
Search Tags:#typescript#vitest#react#playwright#frontend-testing#unit-tests#e2e-tests
One-click install
npx skills add https://github.com/datamonsterr/mycoai_projects --skill typescript-testing-datamonsterr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: typescript-testing
Source: https://github.com/datamonsterr/mycoai_projects/tree/main/.opencode/skills/typescript-testing
Command: npx skills add https://github.com/datamonsterr/mycoai_projects --skill typescript-testing-datamonsterr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend development often suffers from silent regressions and flaky UI behavior. This skill provides a structured approach to writing focused unit and end-to-end tests for the MycoAI frontend, helping teams catch regressions early and maintain UI quality.

Core Features & Use Cases

  • Unit & component tests: write small, fast tests that verify individual TS components and utilities.
  • End-to-end coverage for UI flows: automate browser journeys to validate routing, forms, loading, and backend interactions.
  • Repo-aligned conventions: follow the project's TypeScript, React 19 + Vite setup and adhere to existing lint/typecheck requirements.

Quick Start

Add a minimal Vitest-based test around the feature you changed and run the repository's lint, typecheck, and build steps to confirm changes.

Frequently Asked Questions about typescript-testing

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

FAQPage Schema
How do I write TypeScript frontend tests for React components?▼

TypeScript frontend tests for React components are written as small, fast unit tests using Vitest, verifying individual component logic and utility functions to catch regressions early.

What's the best way to automate end-to-end tests for React UI flows?▼

End-to-end tests for React UI flows are automated using Playwright to validate browser journeys, covering routing, forms, loading states, and backend interactions.

How do I set up unit testing with Vitest in a React and TypeScript project?▼

Vitest unit testing in a React and TypeScript project involves adding a minimal test scaffold around the changed feature and running the repository's lint, typecheck, and build steps to confirm changes.

Does this frontend testing approach work with React 19 and Vite?▼

Yes, this frontend testing approach follows repo-aligned conventions designed for a React 19 and Vite setup, adhering to existing lint and typecheck requirements while scaffolding tests.

Why do I need both unit and end-to-end tests for my TypeScript frontend?▼

Unit tests verify individual TypeScript components and utilities for fast regression detection, while end-to-end tests validate full UI flows and backend interactions to prevent flaky UI behavior.

What are the limitations of using Vitest and Playwright for frontend testing?▼

Vitest and Playwright provide minimal viable test scaffolding focused on the MycoAI project conventions, meaning they require adherence to existing repo lint and typecheck rules rather than generating isolated custom test environments.

Related Skills

Explore More Software Engineering Skills→
MadAppGangMadAppGang
278

tooling-setup

Configure React 19 frontend tooling with Vite, TypeScript, Biome, and Vitest.

Official
Intermediate
jie023jie023
36

test-ui

Automate web UI testing with Playwright for layout, styles, and interactions.

Community
Intermediate
jaballerjaballer

react-testing

Set up and write Playwright and Vitest tests for React applications.

Community
Advanced
fgarofalo56fgarofalo56
6

testing

Run unit, integration, and E2E tests with pytest, Jest, Cypress, and Playwright.

Community
Advanced