了解 React 测试流水线（初学者）

Source: Dev.to

介绍

在使用 React Testing Library (RTL) 测试 React 时，了解幕后发生了什么会很有帮助。本指南将整个流程——从组件函数到最终的测试断言——拆解成易于初学者理解的步骤。

组件函数 (App)

function App() {
  return 
## Tasks
;
}

• React 组件只是返回 JSX 的函数。
• JSX 是对 UI 应该如何呈现的声明式描述；它还不是实际的 HTML。
• React 必须先处理这些 JSX。

JSX → 虚拟 DOM

React 接收 JSX 并创建一个称为 虚拟 DOM 的内存结构。这是一个蓝图，而不是浏览器中的真实 DOM。

内部表示示例：

{
  "type": "h1",
  "props": { "children": "Tasks" }
}

虚拟 DOM 使 React 能够高效地 diff 旧的和新的 UI 树，只更新发生变化的部分。

在测试中的渲染

render();
screen.getByText('Tasks');

1. render() – React 将组件渲染到 jsdom 中的虚拟 DOM，jsdom 是用于测试的假浏览器环境。
2. screen.getByText('Tasks') – 以用户看到的方式查询虚拟 DOM。

不要去定位 CSS 选择器或内部状态，而是通过 可访问的角色、标签或文本 进行查询，遵循 RTL 的指导原则：

“你的测试越像软件的实际使用方式，就能提供越多的信心。”

断言

expect(screen.getByText('Tasks')).toBeInTheDocument();

• 确认该元素存在于 DOM 中（即用户能够看到它）。
• 你并不是在测试 React 如何渲染，而是验证预期的 UI 是否出现。
• 这使得测试对内部变化（如重构 useState、useEffect 或拆分组件）保持韧性。

流程概览

餐厅类比

你不在乎厨师怎么切菜——只要菜的味道对。同样，你不在乎 React 如何管理状态——只要出现正确的 UI 即可。

总结

1. React 组件 返回 JSX → React 将其转换为虚拟 DOM。
2. React Testing Library 在 jsdom 中渲染该虚拟 DOM。
3. 像 getByText 这样的 查询 模拟用户与 UI 的交互方式。
4. 像 toBeInDocument 这样的 断言 确认用户所看到的内容。

这种方法即使在重构组件内部时，也能保持测试的稳定性和意义。