React Native Testing Library 中 toHaveDisplayValue 的正确使用方法

在使用 React Native Testing Library 进行组件测试时，开发者经常会遇到验证 TextInput 组件显示值的需求。官方文档中提到的 toHaveDisplayValue 是一个非常有用的匹配器，但很多开发者在使用时会遇到"TypeError: expect(...).toHaveDisplayValue is not a function"的错误。

问题根源分析

这个错误通常是由于测试环境没有正确配置导致的。React Native Testing Library 提供了一系列扩展的 Jest 匹配器，包括 toHaveDisplayValue，但这些匹配器需要显式导入才能使用。

正确配置方法

要在测试中使用 toHaveDisplayValue 匹配器，需要在 Jest 配置文件中进行以下设置：

1. 在 package.json 的 jest 配置部分，确保 setupFilesAfterEnv 数组中包含正确的导入路径：

"setupFilesAfterEnv": [
  "@testing-library/react-native/extend-expect"
]

2. 特别注意路径的正确性，常见的错误是混淆了以下两种导入：

• 正确的：@testing-library/react-native/extend-expect
• 错误的：@testing-library/jest-native/extend-expect

实际应用示例

配置完成后，可以在测试中这样使用 toHaveDisplayValue 匹配器：

const textInput = screen.getByPlaceholderText('mobile Number');
expect(textInput).toHaveDisplayValue(/^5[0-9]{8}$/);

这个匹配器不仅可以接受字符串作为预期值，还可以接受正则表达式，使得验证更加灵活。

常见问题排查

如果按照上述配置后仍然遇到问题，可以检查以下几点：

1. 确保 @testing-library/react-native 的版本是最新的
2. 检查项目中是否有多个 Jest 配置文件导致冲突
3. 确认没有其他测试设置覆盖了 extend-expect 的导入

总结

正确配置测试环境是使用 React Native Testing Library 高级匹配器的前提。toHaveDisplayValue 是一个非常实用的匹配器，能够帮助开发者轻松验证 TextInput 组件的显示值。通过本文的指导，开发者应该能够解决配置问题，顺利地在测试中使用这一功能。