What is testing-best-practices?

Shared testing guidance for client and server code, covering asynchronous tests, Vitest APIs, and class-name checks.

Use it when writing or reviewing tests with Vitest, React Testing Library, user-event, or MSW, including tests that wait for loading states or asynchronous results.

It gives tests a consistent structure and helps avoid common mistakes when checking delayed updates, mock functions, and rendered elements.

How recca0120/code-quest configures Claude Code

Reuse

Borrowing it

Nothing to install: this file belongs to recca0120/code-quest. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.

Copy the file

curl -O https://raw.githubusercontent.com/recca0120/code-quest/main/.claude/skills/testing-best-practices/SKILL.md

Clone the repo

git clone --depth 1 https://github.com/recca0120/code-quest

Made for: Claude Code.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/recca0120/code-quest/testing-best-practices/github.svg)](https://agentmods.dev/skills/recca0120/code-quest/testing-best-practices)

Your own site

<a href="https://agentmods.dev/skills/recca0120/code-quest/testing-best-practices"><img src="https://agentmods.dev/badge/skills/recca0120/code-quest/testing-best-practices/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/recca0120/code-quest/testing-best-practices"><img src="https://agentmods.dev/badge/skills/recca0120/code-quest/testing-best-practices.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 90 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 1,061 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00090	$0.01061
Opus 5.5	$0.00036	$0.00424
Sonnet 5.5	$0.00018	$0.00212
Haiku 4.5	$0.00009	$0.00106

Measured 2mo ago against content hash 37458d5ca93d, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

testing-best-practices scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2mo ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

.claude/skills/testing-best-practices/SKILL.md · 94 lines

How it starts

The opening of the file, as written. The whole thing — 94 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Testing Best Practices (Cross-Cutting)

核心原則 / test double 決策 / Fake Component / 測試放置 — 詳見 frontend-testing Server 測試（DB / socket.io server-side）— 詳見 vitest-testing (server) TDD 流程 — 詳見 tdd-guidelines Socket + pipeline harness — 詳見 fake-summoner-client / fake-summoner-server

Stack

Package	Version
vitest	^3.2.4
@testing-library/react	^16.0.0
@testing-library/user-event	^14.5.2
msw	^2.x
Storybook	^10.3.5

Async Patterns

Pattern	Use when
`findByRole(...)`	Element appears after async work
`waitFor(() => expect(...))`	Condition becomes true after re-renders
`waitForElementToBeRemoved(...)`	Loading spinner disappears
`queryByRole(...)`	Assert something is NOT in DOM

Async 斷言用 findBy* 或 queryBy* + waitFor；getBy* 保留給同步檢查。

Vitest API Cheatsheet

API	When
`vi.fn()`	Standalone mock function
`vi.spyOn(obj, 'method')`	Watch/override method（`.mockRestore()` 可用）
`vi.mock('module')`	Hoisted，替換整個 module（最後手段）
`vi.mocked(fn)`	Type-safe 存取 mock methods
`beforeEach(() => vi.clearAllMocks())`	Reset call counts
`afterEach(() => vi.restoreAllMocks())`	Restore originals（與 `vi.spyOn` 搭配）

Asserting className

專案 cn() 包了 twMerge 自動解決衝突。斷言 className 時：

✅ 斷言 semantic token（行為契約）

expect(el.className).toMatch(/\bz-modal\b/);
expect(button).toHaveClass('bg-accent');

⚠️ 避免斷言精調 utility（易被視覺微調破）

expect(el).toHaveClass('p-4 text-sm w-5');  // 微調 padding 時 fail

Semantic token 作為 behavior assertion 合理；任意 utility 值（p-4、text-sm）是 implementation detail，不斷言。

Vitest vs Storybook Play Function

Aspect	Vitest + RTL	Storybook Play
Purpose	Logic / state / integration / errors	Visual states / a11y / interaction demos
Environment	jsdom (Node)	Real browser
Speed	Fast, CI-first	Slower, visual regression

Test behavior in Vitest；Storybook 用於 visual snapshot 和 a11y audit。不重複兩邊都寫。

Read the full file on GitHub · 94 lines

Files

What ships with it

2 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

2mo ago First seen · 94 lines · 90 tokens per session scan A 37458d5ca93d

Subscribe to this mod's changes

testing-best-practices is a skill published in the GitHub repository recca0120/code-quest (11 stars, last pushed 4mo ago), licensed MIT. It adds 90 tokens to every session and 1,061 once invoked, about $0.0004 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Testing

research-engineer

An uncompromising Academic Research Engineer. Operates with absolute scientific rigor, objective criticism, and zero flair. Focuses on theoretical correctness, formal verification, and optimal implementation across any required technology.

davila7/claude-code-templates · 43 tokens

tika-eval-compare

Compare extracts from two Tika builds over a corpus to detect regressions in content, encoding, exceptions, and embedded-document handling. Use for "compare before/after extracts", "eval this change against the corpus".

apache/tika · 50 tokens

cua-driver

Use Cua Driver for desktop or browser tasks that are awkward or unavailable through Bash/APIs, or when the user explicitly wants GUI interaction: app testing, visual bug reproduction, form filling, calendar entry, screenshots, and demo recording. Also covers Cua setup; not OpenAI Codex Computer Use or web research.

davidondrej/skills · 68 tokens

code-quest: Skill for Claude Code