用途:Testing Library(React/DOM)以“测试越接近软件使用方式,越能带来信心”为原则,鼓励测试用户可见行为而非 state、props 等实现细节。适用于 React、Vue、Angular、Svelte 组件的用户交互测试、可访问性查询优先、异步 DOM 状态同步,以及重构时不轻易失败的测试套件。
主要能力:按用户可访问优先级的查询层级选元素——getByRole(role, { name }) 最优先,其次 getByLabelText、getByPlaceholderText、getByText、getByTestId 仅作兜底;用 findBy* 等待异步元素出现,用 waitForElementToBeRemoved 断言元素消失;推荐用 @testing-library/user-event 替代 fireEvent,以派发更真实的浏览器事件(focus、hover、keydown、click)。
使用方式:安装后可用 render、screen、fireEvent 等 API,例如 render(); const linkElement = screen.getByText(/learn react/i); expect(linkElement).toBeInTheDocument(); 点击按钮可用 screen.getByRole("button", { name: /submit/i }) 配合 fireEvent.click。异步登录示例中,用 userEvent.setup() 创建用户、await user.type(screen.getByRole("textbox", { name: /email/i }), "user@example.com")、await user.click(screen.getByRole("button", { name: /sign in/i })),再断言回调参数。异步可用 await screen.findByRole("alert"),或 await waitForElementToBeRemoved(() => screen.queryByRole("progressbar"))。
最佳实践:优先 userEvent 而非 fireEvent;用 getByRole 加 name 验证可访问性树;通过 screen 查询而非从 render() 解构;安装 jest-dom 或 vitest-dom 匹配器以获得 expect(btn).toBeDisabled() 这类断言。避免按 class 或标签名查询、避免空的 waitFor 回调、避免把 getByTestId 当首选。
常见问题:找不到角色时可能是缺少 ARIA 角色或标签,或元素尚未渲染,可用 findByRole 或 screen.debug() 排查;出现 act(...) 警告通常是异步动作未 await;匹配多个元素时用 within(container) 限定范围或指定更精确的 name。
限制:本资料未提供具体安装命令、版本、收费、平台或性能数据。