skills.rest
leboncoin
leboncoinOFFICIAL
Explore all skills by this author →
Website𝕏@leboncointechGitHub

generate-tests

Create and update Vitest unit tests for Spark UI components.

92|26|Updated Jan 26, 2023
Search Tags:#unit tests#accessibility#Vitest#React Testing Library#component testing#generate#Spark UI
One-click install
npx skills add https://github.com/leboncoin/spark-web --skill generate-tests-leboncoin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: generate-tests
Source: https://github.com/leboncoin/spark-web/tree/main/.cursor/skills/generate-tests
Command: npx skills add https://github.com/leboncoin/spark-web --skill generate-tests-leboncoin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps developers generate comprehensive unit tests for Spark UI components using Vitest and React Testing Library, reducing manual testing effort and increasing test coverage.

Core Features & Use Cases

  • Create or update unit tests in ComponentName.test.tsx within the component directory
  • Enforce testing-library setup with Vitest, React Testing Library, and @testing-library/user-event
  • Ensure tests cover rendering, props, variants, interactions, accessibility, and edge cases
  • Provide structured test templates and guidance for maintainability and consistency

Quick Start

Create or update a file named ComponentName.test.tsx in the component directory and run npm run test:run to execute tests, or npm run test:ui for watch mode.

Frequently Asked Questions about generate-tests

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

FAQPage Schema
How do I generate unit tests for React components using Vitest and React Testing Library?▼

This skill automates generating unit tests for React components with Vitest and React Testing Library, placing test files in the component directory and running them via npm run test:run or npm run test:ui.

What should component tests cover when using Vitest and React Testing Library?▼

Component tests using Vitest and React Testing Library should cover rendering, props, variants, interactions, accessibility considerations, and edge cases to ensure comprehensive validation and maintainability.

Can I use this approach to improve test coverage for existing UI components?▼

Yes, you can update existing unit tests to improve test coverage by modifying the ComponentName.test.tsx file within the component directory and validating specific component scenarios.

Do I need @testing-library/user-event to write component tests with Vitest?▼

Yes, the standardized testing setup requires Vitest, React Testing Library, and @testing-library/user-event to properly simulate interactions and validate component behavior.

What's the best way to structure unit tests for Spark UI components?▼

The best way to structure unit tests for Spark UI components is to enforce standardized test file locations, framework choices, and structured templates that ensure maintainability and consistency.

Related Skills

Explore More Software Engineering Skills→
mikemylmikemyl
1

front-end-testing

Automate React UI component tests with Vitest Browser Mode and DOM Testing Library.

Community
Intermediate
wot-uiwot-ui
284

create-test

Generate Vitest unit test scaffolds for components under tests/components.

Official
Intermediate
leboncoinleboncoin
92

check-accessibility

Automate WCAG 2.1 AA accessibility testing of Spark UI components with Playwright.

Official
Intermediate
AbdullahmohammadarefAbdullahmohammadaref

typescript-testing

Configure Vitest and write TypeScript tests for React components.

Community
Intermediate