技能 react-testing

📦

react-testing

Name: react-testing
Author: CJHarmath

内容修订 r1 安全 ⚙️ 外部命令

构建可靠的 React 测试

当异步状态、providers 和 mocks 处理不一致时，React 测试套件经常会变得不稳定。此技能为 Claude、Codex 和 Claude Code 提供用于编写聚焦 React 测试的实用模式。

支持: Claude Codex Code(CC)

🥉 77 青铜

使用我的智能体安装

将此请求复制给你的智能体，其中包含权威 Skill 页面和清单。

智能体请求

Review the Skillstore skill "react-testing" from https://skillstore.io/skills/cjharmath-react-testing.md and its manifest at https://skillstore.io/api/skills/cjharmath-react-testing/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

你的智能体仍应展示其计划，并按安全策略请求必要确认。

Agent 可读资源

当 AI Agent、爬虫或脚本需要干净上下文，而不是读取完整页面时，请使用这些链接。

Markdown 详情 GET /skills/cjharmath-react-testing.md 已签名 manifest GET /api/skills/cjharmath-react-testing/manifest 已签名 lockfile GET /api/skills/cjharmath-react-testing/lockfile

测试它

正在使用“react-testing”。登录表单需要针对必填字段、成功提交和加载行为的测试。

预期结果:

针对验证、提交和禁用按钮状态的聚焦测试计划。
针对 email、password 和 submit 控件的建议可访问查询。
针对提交处理程序和 loading prop 的 mock 指南。

正在使用“react-testing”。一个 Zustand store 测试在测试用例之间泄漏状态。

预期结果:

在每个测试前恢复初始 store 状态的重置策略。
建议在异步操作完成后读取最新状态。
检查状态变化且不依赖组件重新渲染的断言。

正在使用“react-testing”。带有 React Query 的组件因没有可用 provider 而失败。

预期结果:

一个带有隔离测试 query client 的可复用 provider wrapper。
适合确定性测试的 retry 和 cache 设置。
针对加载状态和已解析状态的等待策略。

安全审计

安全

v7 • 2026/7/6 打开版本化报告

All static external command findings are false positives caused by Markdown code fences or inline backticks in documentation examples. The sensitive-data and reconnaissance findings are also false positives from normal test assertions. No evidence of prompt injection, data exfiltration, or malicious intent was found.

已扫描文件

501

分析行数

复核项

已忽略误报

最新一次完成的静态与语义审计未检测到已确认的安全发现。这并不能证明该 Skill 没有副作用。

审计者: codex 查看审计历史 →

分享与引用此报告

分享版本化评估报告、中性徽章、嵌入卡片和引用。Skillstore 只报告证据，不判断该 Skill 是否安全。

打开版本化报告

复制报告链接

https://skillstore.io/skills/cjharmath-react-testing/audits/7?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 徽章

[![Skillstore security assessment](https://skillstore.io/badges/skills/cjharmath-react-testing/security.svg)](https://skillstore.io/skills/cjharmath-react-testing?utm_source=security_passport_badge)

HTML 徽章

<a href="https://skillstore.io/skills/cjharmath-react-testing?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/cjharmath-react-testing/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

嵌入卡片

<iframe src="https://skillstore.io/embed/skills/cjharmath-react-testing.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

学术引用 (APA · BibTeX · CFF)

APA 引用

CJHarmath. (2026). react-testing security audit report (audit version 7) [Author version unspecified]. Skillstore. https://skillstore.io/skills/cjharmath-react-testing/audits/7

BibTeX 引用

@techreport{cjharmath-cjharmath-react-testing-2026,
  author = {CJHarmath},
  title = {react-testing security audit report (audit version 7)},
  institution = {Skillstore},
  year = {2026},
  number = {7},
  url = {https://skillstore.io/skills/cjharmath-react-testing/audits/7},
  note = {Author version unspecified}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "react-testing security audit report (audit version 7)"
version: "unspecified"
type: report
authors:
  - name: "CJHarmath"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/cjharmath-react-testing/audits/7"
identifiers:
  - type: other
    value: "skillstore:cjharmath-react-testing:audit:7"
    description: "Skillstore immutable audit report identifier"

Skillstore 评分

评分依据证据置信度: 高

架构

可维护性

内容

社区

规范符合性

你能构建什么

添加组件测试覆盖率

创建用于验证渲染、加载状态、用户操作和可访问输出的测试。

稳定有状态测试套件

重置 Zustand stores 和 React Query clients，使测试保持隔离且可重复。

调试异步 UI 失败

解决 React 测试中的 act 警告、时序问题、缺失查询和 mock 不匹配。

试试这些提示

创建组件测试

为此组件编写 React Testing Library 测试。覆盖渲染、用户操作、加载状态和可访问查询。

测试异步状态

为此异步 React 状态流程创建测试。包括 act 或 waitFor 的用法、store 重置，以及每个异步步骤后的清晰断言。

Mock providers 和 APIs

为这个带有 React Query、routing、context providers 和 mocked API modules 的组件设计测试。保持 provider 设置可复用。

诊断失败的测试套件

审查这个失败的 React 测试输出和测试文件。识别可能原因，解释修复方法，并建议更强的断言。

最佳实践

优先使用与用户和页面交互方式相匹配的可访问查询。
在每个测试前重置 stores、mocks 和 query clients。
在断言最终状态之前等待异步 UI 变化。

避免

不要在测试用例之间共享可变 store 状态。
不要对动态或频繁变化的内容使用 snapshots。
不要在未检查异步状态更新的情况下忽略 act 警告。

常见问题

此技能专注于哪些测试工具？

它专注于面向 React Web 应用程序的 Jest 和 React Testing Library。

它可以帮助测试 Zustand stores 吗？

可以。它包含用于重置 store 状态和检查异步 store actions 的模式。

它涵盖 React Query 测试吗？

可以。它展示了如何创建测试 query client，并使用 QueryClientProvider 包装组件。

它可以调试 act 警告吗？

可以。它解释了解决常见 act 警告原因的等待模式。

它会自动运行测试吗？

不可以。它会记录测试命令和模式，但不会自行执行命令。

它对端到端测试有用吗？

仅间接有用。该指南适用于单元测试和集成测试，而不是浏览器自动化套件。

开发者详情

作者

CJHarmath

许可证

MIT

Skillstore 修订

版本提示

作者未声明版本。

仓库

https://github.com/CJHarmath/claude-agents-skills/tree/main/skills/react-testing

引用

dd4a3ef9f20ddf38830950b4bb713df96b431fd6

维护新鲜度

2026/7/24

使用量

8 次下载 · 229 次浏览

文件结构

构建类型安全的 React 组件

由 softaworks

React TypeScript 工作通常需要精确的事件、hook 和路由类型。此技能提供针对类型化组件、React 19 API 和路由的聚焦模式。

编码与开发查看

react-testing

使用我的智能体安装

Agent 可读资源

测试它

安全审计

风险因素

复制报告链接

Markdown 徽章

HTML 徽章

嵌入卡片

APA 引用

BibTeX 引用

CITATION.cff

Skillstore 评分

你能构建什么

添加组件测试覆盖率

稳定有状态测试套件

调试异步 UI 失败

试试这些提示

最佳实践

避免

常见问题

开发者详情

CJHarmath 的更多技能

rn-performance

react-zustand-patterns

web-build-deploy

rn-styling

rn-observability

rn-zustand-patterns

相关技能

jest-testing

testing

code-reviewer

senior-fullstack

vercel-react-view-transitions

react-dev