React Native Testing Library Jest 匹配器完整清单：20个实用断言方法

React Native Testing Library Jest 匹配器完整清单：20个实用断言方法

【免费下载链接】react-native-testing-library🦉 Simple and complete React Native testing utilities that encourage good testing practices.项目地址: https://gitcode.com/gh_mirrors/re/react-native-testing-library

React Native Testing Library 提供了丰富的 Jest 匹配器，帮助开发者编写可靠的组件测试。这些匹配器专为 React Native 应用设计，遵循可访问性优先原则，让测试更贴近用户实际交互行为。本文将系统介绍20个最常用的断言方法，帮助你轻松掌握组件测试技巧。

基础匹配器：验证元素状态

toBeVisible：检查元素可见性

确认组件在屏幕上可见，考虑了opacity、visibility和display等样式属性。

expect(screen.getByText('登录')).toBeVisible();

toBeDisabled：验证元素禁用状态

检查按钮、输入框等交互元素是否处于禁用状态。

expect(screen.getByRole('button', { name: '提交' })).toBeDisabled();

toBeChecked：确认选择状态

适用于复选框、单选按钮等可切换组件的选中状态验证。

expect(screen.getByTestId('remember-me')).toBeChecked();

内容验证：文本与属性检查

toHaveTextContent：验证文本内容

精确或部分匹配元素包含的文本内容，支持正则表达式。

expect(screen.getByRole('heading')).toHaveTextContent(/欢迎/);

toHaveAccessibleName：可访问性名称检查

验证元素的可访问性标签，确保应用对辅助技术友好。

expect(screen.getByRole('button')).toHaveAccessibleName('保存更改');

toHaveProp：验证组件属性

检查 React 组件是否具有特定属性及值。

expect(screen.getByTestId('avatar')).toHaveProp('size', 'large');

高级交互：用户行为验证

toHaveDisplayValue：输入框值检查

验证文本输入框、选择器等表单元素的当前显示值。

expect(screen.getByPlaceholderText('请输入邮箱')).toHaveDisplayValue('user@example.com');

toContainElement：元素包含关系

确认一个元素是否包含另一个元素，用于验证组件嵌套结构。

expect(screen.getByTestId('user-card')).toContainElement(screen.getByText('用户资料'));

toBeOnTheScreen：元素存在性检查

确保元素不仅被渲染，而且在屏幕可视区域内。

expect(screen.getByTestId('notification')).toBeOnTheScreen();

状态与样式：组件外观验证

toHaveStyle：内联样式检查

验证元素的内联样式属性是否符合预期。

expect(screen.getByTestId('badge')).toHaveStyle({ backgroundColor: '#ff0000' });

toBeBusy：加载状态验证

检查元素是否处于加载状态，通常用于验证骨架屏或加载指示器。

expect(screen.getByTestId('data-loading')).toBeBusy();

toBeExpanded：展开状态验证

适用于折叠面板、下拉菜单等可展开组件的状态检查。

expect(screen.getByTestId('settings-panel')).toBeExpanded();

完整匹配器清单与使用场景

以下是 React Native Testing Library 提供的全部核心匹配器，按功能分类整理：

最佳实践与注意事项

1. 优先使用角色查询：通过getByRole等基于可访问性的查询方法定位元素，而非getByTestId

2. 避免过度指定：测试应关注用户可见行为，而非内部实现细节

3. 结合用户事件：配合fireEvent或userEvent模拟用户交互后再进行断言

4. 异步处理：使用waitFor和findBy*查询处理异步渲染组件

所有匹配器实现源码可在 src/matchers/ 目录中查看，包含详细的类型定义和实现逻辑。官方文档提供了更完整的使用示例和最佳实践指南。

掌握这些匹配器将帮助你编写更健壮、更易维护的 React Native 组件测试，提高应用质量和开发效率。通过模拟真实用户行为和验证可访问性，你的测试将更有价值且更能反映实际使用场景。

【免费下载链接】react-native-testing-library🦉 Simple and complete React Native testing utilities that encourage good testing practices.项目地址: https://gitcode.com/gh_mirrors/re/react-native-testing-library