Floating-UI中useFocus钩子导致测试失败的解决方案

在React项目中使用Floating-UI构建工具提示组件时，开发者可能会遇到一个常见问题：工具提示在浏览器中正常工作，但在测试环境中却无法触发显示。这个问题主要出现在Floating-UI 0.26.1及以上版本中，其根源在于useFocus钩子的visibleOnly选项实现方式发生了变化。

问题背景

Floating-UI是一个流行的UI工具库，用于创建浮动元素如工具提示、下拉菜单等。在0.26.1版本之前，工具提示的焦点测试能够正常通过，但之后的版本中，测试开始失败，尽管实际UI表现依然正常。

问题原因

深入分析后发现，问题的核心在于useFocus钩子中:focus-visible伪类的处理方式发生了变化：

1. 在0.26.1版本之前，当测试环境中检查:focus-visible伪类时会抛出错误，代码会回退到默认行为
2. 从0.26.1开始，测试环境中的CSS选择器匹配行为发生了变化，导致:focus-visible检查返回false而非抛出错误
3. 这种变化使得onFocus回调提前返回，工具提示无法正常显示

技术细节

问题的根本原因与测试环境中使用的nwsapi库有关。nwsapi是jsdom用来处理CSS选择器的底层库，其最新版本(2.2.18)对:focus-visible伪类的处理方式发生了变化：

• 旧版本：检查:focus-visible时会抛出错误，触发回退机制
• 新版本：直接返回false，导致visibleOnly选项生效，阻止了工具提示的显示

解决方案

目前有两种可行的解决方案：

1. 临时解决方案：在useFocus钩子中显式设置visibleOnly: false，绕过:focus-visible检查
2. 长期解决方案：等待Floating-UI团队发布修复版本，或者考虑在测试环境中模拟:focus-visible行为

最佳实践

对于使用Floating-UI的开发者，建议：

1. 在测试工具提示等依赖焦点事件的组件时，注意版本差异
2. 考虑为测试环境编写特定的配置，确保测试行为的一致性
3. 关注Floating-UI的更新日志，及时获取官方修复信息

这个问题提醒我们，UI库的更新可能会对测试环境产生意想不到的影响，特别是在涉及浏览器特定行为和伪类处理时。保持测试环境的稳定性和可预测性是前端开发中的重要课题。