Vitest + RTL Vitest + RTL 测试
最后更新：2026-10-28
Vitest + RTL Vitest + RTL 测试
Vitest 是跑得飞快的测试运行器（与 Vite 共用配置），React Testing Library 让你「像用户一样」测组件：render 挂载、getByRole 查询、userEvent 模拟交互，断言行为而非实现细节。
| 分组 | 数据与工程化 |
|---|---|
| 类型 | 工具链 |
| 引入版本 | Vitest 2.x + RTL 16 |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
import { describe, it, expect } from 'vitest'
import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import Counter from './Counter'
describe('Counter', () => {
it('点击后数字 +1', async () => {
render(<Counter />)
expect(screen.getByRole('status')).toHaveTextContent('0')
await userEvent.click(screen.getByRole('button', { name: '+1' }))
expect(screen.getByRole('status')).toHaveTextContent('1')
})
})返回值：describe/it 组织用例；render 挂载组件并返回查询句柄；screen.getByRole 等按语义查询元素；expect 断言结果。
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
上方 Counter 随按钮变化；下方用例面板逐个亮起 ✅——对应 RTL 里 getByRole 查询 + expect 断言通过的过程（模拟演示）。💡 要点
💡 提示 优先用 getByRole/ByLabelText 这类语义查询：既是测试又顺手检查了可访问性，比 getByTestId 更贴近用户视角。
ℹ️ 说明 Vitest 与 Vite 共用配置与转换管道，速度远快于 Jest；从 Jest 迁移通常只需改 import 来源。
⚠️ 注意 不要断言内部 state 或实现细节，重构会把测试全弄红；测「用户能看到什么、点什么出什么」。
🏷️ 数据与工程化相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q RTL 和 Enzyme 的思路差别？
A Enzyme 常直接探内部 state/props（实现细节），RTL 只从渲染结果按用户视角查询交互，测试更耐重构，也是官方推荐。
Q 异步操作（接口后渲染）怎么测？
A 用 findByRole 等 findBy* 查询（内置 waitFor 轮询），配合 msw 拦截网络请求，返回可控的假数据。
Q Vitest 怎么测自定义 Hook？
A 用 @testing-library/react 的 renderHook，result.current 读取最新返回值，rerender 触发更新后断言。
