frontend-typescript-testing SKILL.md skillA
frontend-typescript-testing from shinpr/ai-coding-project-boilerplate is an agent skill: a SKILL.md folder an AI agent loads when a task calls for it.
mdr add shinpr/ai-coding-project-boilerplate/frontend-typescript-testing@git:20261014.f06813cPins git:20261014.f06813c in mdr.lock. Pin the fingerprint instead.
- Audit grade
- A, 17 of 17 checks passed
- Kind
- SKILL.md skill
- Repository
- shinpr/ai-coding-project-boilerplate
- Path
.claude/skills-zh-CN/frontend-typescript-testing/SKILL.md- Versions recorded
- 4
- Latest version
- git:20261014.f06813c, committed Oct 14, 2026
- First version recorded
- Aug 31, 2026
- Size
- 5,662 bytes
- Repository stars
- 234
- License
- MIT
使用仓库已配置的 React 测试与浏览器测试工具（包括 RTL、MSW、Vitest，以及存在时的 Playwright）设计前端测试。适用于新增或评审组件测试、加载/错误状态测试、集成测试或前端 E2E 测试时。.
Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.
What the file says
# TypeScript 测试规则（前端）
## 前置条件检测
在选择框架或命令之前，先检查 `package.json`、锁文件、测试配置以及现有测试的 import。仅在依赖/配置确实存在时才应用 Vitest、React Testing Library、MSW 或 Playwright 的规则。若仓库配置了不同的等效工具，则使用该工具。若无法确定可运行的测试工具，应报告已检查的路径以及缺失的框架或命令，而不是凭空指定。
## 参考资料
| 测试类型 | 参考 | 使用场景 |
|-----------|-----------|-------------|
| **单元测试 / 集成测试** | 本文档 | 使用 RTL + Vitest + MSW 实现 React 组件测试 |
| **E2E** | [references/e2e.md](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 测试来验证页面级组合。
### 测试类型与范围
1. **单元测试（React Testing Library）**
- 验证单个组件或函数的行为
…Read the whole file at its exact version.
How to install
mdr add shinpr/ai-coding-project-boilerplate/frontend-typescript-testing@sha256:d4e57cabd9b11dd5The line at the top of this page pins the label git:20261014.f06813c, which is what most people want. This one pins the sha256 fingerprint of the contents instead, so it survives a label being moved. Either way the exact version is written to mdr.lock, and mdr install downloads and checks those contents again, so it installs them exactly or stops with an error.
[](https://markdownregistry.com/a/art_6626wsbbl2oohgvk)
2 badge image fetches in 30 days. What the badge shows.
Versions
The registry has recorded 4 versions of this file, between Aug 31, 2026 and Oct 14, 2026, about one every 15 days.
| version | committed | commit | size | audit | |
|---|---|---|---|---|---|
| git:20261014.f06813c latest | 2026-10-14 | f06813c | 5,662 B | A | view · diff |
| git:20260923.558b381 | 2026-09-23 | 558b381 | 5,614 B | A | view · diff |
| git:20260923.03f66be | 2026-09-23 | 03f66be | 5,603 B | A | view · diff |
| git:20260831.b183037 | 2026-08-31 | b183037 | 5,624 B | A | view |
Audit of the latest version
- pass: Frontmatter block present
- pass: Frontmatter declares a name
- pass: Frontmatter declares a description
- pass: Size between 200 bytes and 200 KB (5662 bytes)
- pass: No zero-width or bidi control characters
- pass: No instruction hidden inside an HTML comment
- pass: No link to an exfiltration or paste host
- pass: No credential-shaped string
- pass: No instruction to send local credentials anywhere
- pass: No text hidden with inline styles
- pass: No prompt-injection phrasing
- pass: No curl or wget piped into a shell
- pass: No recursive delete of root, home or parent
- pass: No instruction to read or print local credentials
- pass: No base64 blob over 200 characters
- pass: No link to a raw IP address
- pass: No script tag
Source
shinpr/ai-coding-project-boilerplate · 234 stars · license MIT · pushed 2026-10-14 · branch main
API
GET https://markdownregistry.com/api/v1/artifacts/art_6626wsbbl2oohgvk GET https://markdownregistry.com/api/v1/resolve?ref=shinpr/ai-coding-project-boilerplate/frontend-typescript-testing GET https://markdownregistry.com/api/v1/blob/d4e57cabd9b11dd5dc5dced8310df973c01503a1a5cb3d15127fcc5adb373c64
Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.
Guides: the SKILL.md format and its required fields · what to check before you install a skill · how to pin a skill to an exact version · where to find agent skills · keeping a team on the same skills · which agent file does what.
More from shinpr/ai-coding-project-boilerplate
Every file in shinpr/ai-coding-project-boilerplate