React Testing
affaan-m/ECC
React component testing with React Testing Library, Vitest/Jest, MSW for network mocking, accessibility assertions with axe, and the decision boundary between component tests and Playwright/Cypress…
使用仓库已配置的 React 测试与浏览器测试工具（包括 RTL、MSW、Vitest，以及存在时的 Playwright）设计前端测试。适用于新增或评审组件测试、加载/错误状态测试、集成测试或前端 E2E 测试时。
Install Frontend Typescript Testing
$ npx skills add shinpr/ai-coding-project-boilerplate --skill frontend-typescript-testing -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install shinpr/ai-coding-project-boilerplate frontend-typescript-testing --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/shinpr/ai-coding-project-boilerplate.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills-zh-CN/frontend-typescript-testing .claude/skills/frontend-typescript-testing && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "frontend-typescript-testing" agent skill from https://github.com/shinpr/ai-coding-project-boilerplate/tree/main/.claude/skills-zh-CN/frontend-typescript-testing into .claude/skills/frontend-typescript-testing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-typescript-testing", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/shinpr/ai-coding-project-boilerplate/tree/main/.claude/skills-zh-CN/frontend-typescript-testingType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add shinpr/ai-coding-project-boilerplate --skill frontend-typescript-testing -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install shinpr/ai-coding-project-boilerplate frontend-typescript-testing --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/shinpr/ai-coding-project-boilerplate.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills-zh-CN/frontend-typescript-testing .agents/skills/frontend-typescript-testing && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "frontend-typescript-testing" agent skill from https://github.com/shinpr/ai-coding-project-boilerplate/tree/main/.claude/skills-zh-CN/frontend-typescript-testing into .agents/skills/frontend-typescript-testing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-typescript-testing", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add shinpr/ai-coding-project-boilerplate --skill frontend-typescript-testing -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install shinpr/ai-coding-project-boilerplate frontend-typescript-testing --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/shinpr/ai-coding-project-boilerplate.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills-zh-CN/frontend-typescript-testing .cursor/skills/frontend-typescript-testing && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "frontend-typescript-testing" agent skill from https://github.com/shinpr/ai-coding-project-boilerplate/tree/main/.claude/skills-zh-CN/frontend-typescript-testing into .cursor/skills/frontend-typescript-testing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-typescript-testing", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/shinpr/ai-coding-project-boilerplate.git --path .claude/skills-zh-CN/frontend-typescript-testing--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add shinpr/ai-coding-project-boilerplate --skill frontend-typescript-testing -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install shinpr/ai-coding-project-boilerplate frontend-typescript-testing --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/shinpr/ai-coding-project-boilerplate.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills-zh-CN/frontend-typescript-testing .gemini/skills/frontend-typescript-testing && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "frontend-typescript-testing" agent skill from https://github.com/shinpr/ai-coding-project-boilerplate/tree/main/.claude/skills-zh-CN/frontend-typescript-testing into .gemini/skills/frontend-typescript-testing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-typescript-testing", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install shinpr/ai-coding-project-boilerplate frontend-typescript-testingInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add shinpr/ai-coding-project-boilerplate --skill frontend-typescript-testing -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/shinpr/ai-coding-project-boilerplate.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills-zh-CN/frontend-typescript-testing .github/skills/frontend-typescript-testing && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "frontend-typescript-testing" agent skill from https://github.com/shinpr/ai-coding-project-boilerplate/tree/main/.claude/skills-zh-CN/frontend-typescript-testing into .github/skills/frontend-typescript-testing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-typescript-testing", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add shinpr/ai-coding-project-boilerplate --skill frontend-typescript-testing -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install shinpr/ai-coding-project-boilerplate frontend-typescript-testing --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/shinpr/ai-coding-project-boilerplate.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills-zh-CN/frontend-typescript-testing .opencode/skills/frontend-typescript-testing && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "frontend-typescript-testing" agent skill from https://github.com/shinpr/ai-coding-project-boilerplate/tree/main/.claude/skills-zh-CN/frontend-typescript-testing into .opencode/skills/frontend-typescript-testing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-typescript-testing", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
frontend-typescript-testing- GitHub stars
- 232
- Token cost
- ~692 tokens
- SKILL.md length
- 169 words
- Files
- 2 (incl. references)
- Skills in repo
- 42
- Repo updated
- First seen
- Licence
- MIT
At a glance
使用仓库已配置的 React 测试与浏览器测试工具（包括 RTL、MSW、Vitest，以及存在时的 Playwright）设计前端测试。适用于新增或评审组件测试、加载/错误状态测试、集成测试或前端 E2E 测试时。
- Works in 3 steps: 单元测试（React Testing Library） → 集成测试（React Testing Library + MSW） → 跨功能验证
- Tasks that involve Unit testing
- SKILL.md covers 前置条件检测, 参考资料, 测试框架 and 基本测试策略, plus 3 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Frontend Typescript Testing is an agent skill from shinpr/ai-coding-project-boilerplate. 使用仓库已配置的 React 测试与浏览器测试工具（包括 RTL、MSW、Vitest，以及存在时的 Playwright）设计前端测试。适用于新增或评审组件测试、加载/错误状态测试、集成测试或前端 E2E 测试时。
Its SKILL.md is about 690 tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including reference files (for example `references/e2e.md`).
It sits in Testing & QA, covering Unit testing, End-to-end testing and Browser testing. It works with TypeScript, Vitest, Playwright and React. The repository describes itself as: Agentic coding TypeScript boilerplate for Claude Code: sub-agent workflows with built-in quality checks and context engineering. The licence is MIT.
When your agent uses it
- Tasks that involve Unit testing
- Tasks that involve End-to-end testing
- Tasks that involve Browser testing
Example prompts
- “/frontend-typescript-testing”
Workflow steps
3 steps, taken from the first numbered list in SKILL.md.
- 单元测试（React Testing Library）
- 集成测试（React Testing Library + MSW）
- 跨功能验证
What it can do on your machine
Read from SKILL.md and the folder at commit 56913a2. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Frontend Typescript Testing loads about 692 tokens when it runs, and up to ~2.5k if it reads all its reference files. Until then it costs about 34 tokens; SKILL.md has 169 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from shinpr/ai-coding-project-boilerplate at commit 56913a2, republished under its MIT licence (© shinpr). 169 words, ~692 tokens.
Download SKILL.mdSave it as
.claude/skills/frontend-typescript-testing/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.- name
- frontend-typescript-testing
- description
- 使用仓库已配置的 React 测试与浏览器测试工具（包括 RTL、MSW、Vitest，以及存在时的 Playwright）设计前端测试。适用于新增或评审组件测试、加载/错误状态测试、集成测试或前端 E2E 测试时。
TypeScript 测试规则（前端）
前置条件检测
在选择框架或命令之前，先检查 package.json、锁文件、测试配置以及现有测试的 import。仅在依赖/配置确实存在时才应用 Vitest、React Testing Library、MSW 或 Playwright 的规则。若仓库配置了不同的等效工具，则使用该工具。若无法确定可运行的测试工具，应报告已检查的路径以及缺失的框架或命令，而不是凭空指定。
参考资料
| 测试类型 | 参考 | 使用场景 |
|---|---|---|
| 单元测试 / 集成测试 | 本文档 | 使用 RTL + Vitest + MSW 实现 React 组件测试 |
| E2E | references/e2e.md | 使用 Playwright 实现浏览器级 E2E 测试 |
测试框架
- Vitest：当仓库配置或现有测试选用 Vitest 时使用
- React Testing Library：用于组件测试
- MSW (Mock Service Worker)：用于 API 模拟
- 测试导入：
import { describe, it, expect, beforeEach, vi } from 'vitest' - 组件测试导入：
import { render, screen } from '@testing-library/react' - 用户交互：
import userEvent from '@testing-library/user-event' - Mock 创建：使用
vi.mock()
基本测试策略
质量要求
- 回归防护：在关键路径和高复用组件上，断言指定的验收结果、公开分支或失败状态
- 独立性：每个测试都能独立运行，不依赖其他测试
- 可复现性：控制时间、随机性、环境变量、网络响应和浏览器状态，使相同的输入产生相同的可观测结果
- 可读性：每个测试只描述一个用户可见的行为，分离 setup/action/assertion，并将 fixture 限制为该行为实际用到的值
应将测试严谨性集中于何处
对于跨功能复用的共享组件、自定义 hook 和工具函数，应覆盖其公开分支、错误状态和边界契约，因为它们的回归影响范围更大。当行为依赖于多个已渲染单元时，通过集成测试/E2E 测试来验证页面级组合。
测试类型与范围
单元测试（React Testing Library）
- 验证单个组件或函数的行为
- Mock 所有外部依赖
- 数量最多，采用细粒度实现
- 关注用户可观测的行为
集成测试（React Testing Library + MSW）
- 验证多个组件之间的协作
- 使用 MSW (Mock Service Worker) 模拟 API
- 不进行实际的数据库连接（数据库由后端管理）
- 验证实现主要验收标准或涉及多个已渲染组件协作的流程
跨功能验证
- 当新功能触及共享的集成点时，若现有功能失效会破坏主要用户流程或契约，或降低次要可观测行为，则现有功能的连续性成为一项证明义务。在能够暴露其失效的成本最低的边界上加以证明
- 验证模式：现有功能运行 -> 启用新功能 -> 验证现有功能的连续性
- 成功标准：保持源验收标准所指定的显示内容与交互行为；仅在项目配置或需求定义了阈值及其度量方法时，才应用渲染耗时阈值
- 设计为可在 CI/CD 流水线中自动执行
测试实现规范
目录结构与命名
- 将组件的测试与该组件放在同一目录下，使实现与测试同步移动
- 测试文件：
{ComponentName}.test.tsx - 集成测试文件：
{FeatureName}.integration.test.tsx - 测试套件：以描述目标组件或功能的名称命名
- 测试用例：以描述从用户视角出发的预期行为命名
测试代码质量规则
保持每个已提交的测试处于有效状态。当测试保护的是当前行为时应修复它；只有在其对应行为已不再被要求、且源需求或实现契约确认该行为可移除时，才能删除该测试。
Mock 类型安全强制要求
使用 satisfies 将 MSW handler 的响应体约束为其所代表的领域类型，使偏离契约的 fixture 在编译期失败，而不是让测试针对应用实际不会收到的数据形状“通过”。
将组件或依赖的 mock 类型限定为被测对象实际使用的部分——例如 Pick<Props, 'usedProp'>、Pick<Router, 'push'>——而不是完整接口，并用 satisfies 约束该字面量，使多余或命名错误的成员在编译期失败。
测试设计模式
测试用户可见的结果，而不是实现细节。按用户感知的 role 和可访问名称查询（getByRole/getByLabelText/getByText），而不是 getByTestId 或 container.querySelector。通过 userEvent 驱动交互，每个测试使用 userEvent.setup()，而不是触发原始事件，使测试重现浏览器的事件序列。对每个交互和异步断言都使用 await——未 await 的交互会针对更新前的渲染结果进行断言，因此异步 UI 应使用 findBy*。
覆盖空状态、错误状态和加载/异步状态，而不仅是正常路径。通过为单个测试覆盖 MSW handler 来产生错误状态，而不是修改共享的 handler 集合。
当所需的 UI 状态、可访问名称或外部契约未知时，应停止对该断言的测试设计，并指出所需的 UI 规范、验收标准、实现契约或用户决策。可继续编写预期行为已明确的独立断言。
© shinpr, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 1 other file (references) in .claude/skills-zh-CN/frontend-typescript-testing of shinpr/ai-coding-project-boilerplate.
- SKILL.md
- references/e2e.md
Open the folder on GitHubat commit 56913a2
Compare with similar skills
Frontend Typescript Testing next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Frontend Typescript Testing this skillshinpr/ai-coding-project-boilerplate | 232 | — | ~692 | Automated safety check: Pass | MIT | |
| React Testingaffaan-m/ECC | 275k | 1 repos | ~3.3k | Automated safety check: Pass | MIT | |
| Test CommanderEliasOulkadi/shokunin | 114 | — | ~3k | Automated safety check: Notes | MIT | |
| Front End Testingcitypaul/.dotfiles | 739 | — | ~6.2k | Automated safety check: Pass | Custom licence | |
| Svelte Testingspences10/sveltest | 113 | — | ~579 | Automated safety check: Pass | MIT | |
| Playwright Testingchongdashu/vibejam-starter-pack | 149 | — | ~2.1k | Automated safety check: Pass | None |
Similar skills
Test Commander
EliasOulkadi/shokunin
Generate unit, integration, E2E, and visual regression tests following the Testing Trophy methodology (80% integration).
Front End Testing
citypaul/.dotfiles
Behavior-driven UI testing patterns across Vitest Browser Mode, Playwright E2E evidence boundaries, and DOM Testing Library.
Svelte Testing
spences10/sveltest
Fix and create Svelte 5 tests with vitest-browser-svelte and Playwright.
Playwright Testing
chongdashu/vibejam-starter-pack
Plan, implement, and debug frontend tests: unit/integration/E2E/visual/a11y.
Ha Frontend Testing
home-assistant/frontend
Home Assistant frontend testing and validation workflow. An agent skill from home-assistant/frontend.
More from shinpr/ai-coding-project-boilerplate
All 42 skills in this repoIntegration E2E Testing
shinpr/ai-coding-project-boilerplate
Selects and designs the smallest integration/E2E test set that proves accepted behavior at an observable boundary.
Skill Optimization
shinpr/ai-coding-project-boilerplate
Evaluates and optimizes skill file quality using 9 content patterns and 10 editing principles.
Frontend Technical Spec
shinpr/ai-coding-project-boilerplate
Defines React environment, component architecture, state/data flow, build verification, and frontend non-functional criteria from repository evidence.
Frontend Typescript Rules
shinpr/ai-coding-project-boilerplate
Applies React/TypeScript type safety, component design, and state management rules.
Implementation Approach
shinpr/ai-coding-project-boilerplate
Selects implementation strategy (vertical slice, horizontal, or hybrid) with risk assessment.
Subagents Orchestration Guide
shinpr/ai-coding-project-boilerplate
Coordinates subagents through scale-based planning, approval, implementation, verification, and escalation flows.
Related
Categories
Questions about Frontend Typescript Testing
What does Frontend Typescript Testing do?
使用仓库已配置的 React 测试与浏览器测试工具（包括 RTL、MSW、Vitest，以及存在时的 Playwright）设计前端测试。适用于新增或评审组件测试、加载/错误状态测试、集成测试或前端 E2E 测试时。. Frontend Typescript Testing is an agent skill from shinpr/ai-coding-project-boilerplate.
When should I use Frontend Typescript Testing?
Frontend Typescript Testing fits situations like: tasks that involve Unit testing; tasks that involve End-to-end testing; tasks that involve Browser testing.
How do I install Frontend Typescript Testing in Claude Code?
Run `npx skills add shinpr/ai-coding-project-boilerplate --skill frontend-typescript-testing -a claude-code`. Or copy the skill folder (.claude/skills-zh-CN/frontend-typescript-testing in shinpr/ai-coding-project-boilerplate) into .claude/skills/frontend-typescript-testing in your project. Claude Code loads it when a task matches its description.
How do I install Frontend Typescript Testing in Codex?
Run `npx skills add shinpr/ai-coding-project-boilerplate --skill frontend-typescript-testing -a codex`. Or copy the skill folder (.claude/skills-zh-CN/frontend-typescript-testing in shinpr/ai-coding-project-boilerplate) into .agents/skills/frontend-typescript-testing in your project. Codex loads it when a task matches its description.
Can I use Frontend Typescript Testing in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add shinpr/ai-coding-project-boilerplate --skill frontend-typescript-testing -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/frontend-typescript-testing, .gemini/skills/frontend-typescript-testing, .github/skills/frontend-typescript-testing and .opencode/skills/frontend-typescript-testing in your project.
What does Frontend Typescript Testing need to run?
SKILL.md names no scripts, command-line tools or credentials: Frontend Typescript Testing is instructions for the agent only.
Does Frontend Typescript Testing access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Frontend Typescript Testing safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Frontend Typescript Testing use?
Frontend Typescript Testing is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Frontend Typescript Testing use?
About 692 tokens (SKILL.md is roughly 2.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 1.8k tokens, read only when the agent opens those files.
What are the alternatives to Frontend Typescript Testing?
Skills that share tags, products or a category with Frontend Typescript Testing: React Testing (affaan-m/ECC, 275k stars), Test Commander (EliasOulkadi/shokunin, 114 stars), Front End Testing (citypaul/.dotfiles, 739 stars) and Svelte Testing (spences10/sveltest, 113 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Frontend Typescript Testing?
shinpr (a GitHub user) maintains it in shinpr/ai-coding-project-boilerplate, which has 232 GitHub stars. The repository holds 42 skills in this directory. The repository was last updated on October 4, 2026.
Source: shinpr/ai-coding-project-boilerplate on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.