查询、事件与断言——表单及异步界面
使用 getBy/findBy 查询、使用 user-event 进行输入和点击，并使用 jest-dom 断言。自信地测试表单和异步屏幕。
查询、事件与断言——表单及异步界面 是 CoddyKit 上的免费 React Academy 课时。 这是第 2 节课，共 3 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 3 节课。
以用户为中心的测试
目标：像用户一样进行测试。
- 查询：getBy*/findBy*
- 事件：user-event（点击、输入）
- 断言：jest-dom
查询：选择正确的方式
- getBy*：同步；元素缺失时失败
- findBy*：异步；会等待
- queryBy*：元素缺失时返回 null
- 优先使用角色/标签，而不是测试 ID
演示：无障碍登录表单
包含标签和提交按钮的表单。非常适合使用 getByLabelText、getByRole 和用户输入。
<div id="root"></div>
演示：异步列表（加载 → 项目）
模拟异步获取：先显示加载器，然后渲染项目。测试应使用 findBy* 或 waitFor。
<div id="root"></div>
断言与事件
- toBeInTheDocument、toBeDisabled、toHaveTextContent
- 对异步界面使用 findBy*
- 优先使用 user-event，而不是 fireEvent
模式与易错点
模式：
- 准备 → 执行（user-event）→ 断言
- 异步操作：await findBy* 或 waitFor
- 避免随意设置超时；让测试保持快速
异步断言最佳实践
回顾
回顾：优先使用角色/标签查询，通过 user-event 驱动界面，并使用 jest-dom 进行断言。对于异步界面，请等待 findBy*，或将断言放在 waitFor 中。
常见问题解答
「查询、事件与断言——表单及异步界面」课时是免费的吗？
是的 — 「查询、事件与断言——表单及异步界面」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 3 节课。
「查询、事件与断言——表单及异步界面」这节课中我会学到什么？
使用 getBy/findBy 查询、使用 user-event 进行输入和点击，并使用 jest-dom 断言。自信地测试表单和异步屏幕。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 React Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 3 节。
「查询、事件与断言——表单及异步界面」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 React Academy 课中编写并运行代码吗？
能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- React Testing Library 与 Vitest/Jest 配置
- 查询、事件与断言——表单及异步界面
- 模拟获取请求与计时器