بنقرة واحدة
vitest-testing-guidelines
Comprehensive testing guidelines for Vitest with React Testing Library
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
القائمة
Comprehensive testing guidelines for Vitest with React Testing Library
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Code standards and conventions for React, TypeScript, and domain-driven front-end architecture
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
Best practices for structuring React components - function declarations, file organization, and Single Responsibility Principle
Conventional commit format and workflow with Jira ticket integration
| name | Vitest Testing Guidelines |
| description | Comprehensive testing guidelines for Vitest with React Testing Library |
Choose the right guide for your task:
→ See rules/new-tests.md
Use when:
→ See rules/legacy-refactoring.md
Use when:
→ See rules/typescript.md
Use when:
→ See rules/common-patterns.md
Use anytime for:
Quick tasks (50-150 tokens):
Medium tasks (200-400 tokens):
Complex tasks (400-800 tokens):
This skill should be loaded when:
.test.ts or .test.tsx filesFile patterns that trigger this skill:
*.test.ts, *.test.tsx, *.test.js, *.test.jsx*.spec.ts, *.spec.tsx__tests__/ directoryKeywords:
test, vitest, expect, describe, it, mock, spy, render, screen, userEvent, waitFor, assertion
✅ Always use TypeScript (.test.ts or .test.tsx)
testRender, testRenderAdmin helpersdescribe, expect, it, vi (they're global)✅ Use TypeScript and apply modern patterns
.test.js/.test.jsx → .test.ts/.test.tsx⚠️ PROMPT THE USER FIRST:
When asked to add tests to an existing file, ask:
I see this test file uses [JavaScript/TypeScript] with [legacy/modern] patterns.
Would you like me to:
1. Add new tests only:
a) Following the modern approach (less tech debt, recommended)
b) Following the current file's approach (faster, maintains consistency)
2. Refactor the entire file to modern TypeScript patterns (comprehensive, but takes longer)
Which approach would you prefer?
If user chooses option 1a (modern approach):
@/testIf user chooses option 1b (match current approach):
If user chooses option 2 (modern refactor):
npm run test --runnpm run test -- current/src/.../about.test.jsx --runnpm run test -- about.test.jsx --run.test.jsx extension for new Vitest tests (not .vitest.jsx).vitest.jsx files will be renamed to .test.jsx