React Native：如何测试元素是否聚焦？

Question

简单的测试用例：想要查看给定元素是否获得焦点。

要检查某个元素是否专注于带有 RTL 和 jest 的 React Web 应用程序，您有两个简单的选项可供选择：

1. 您可以检查该元素是否与 document.activeElement 相同（可能必须丢弃一些包装器）
2. 您可以使用https://github.com/testing-library/jest-dom#tohavefocus扩展您的笑话匹配器并使用expect(<element>).toHaveFocus()

我不确定 React Native 的等效检查是什么（相当于 jest-dom 扩展的 RN 是https://github.com/testing-library/jest-native并且明显缺少toHaveFocus匹配器）。

Answer 1

今天花了几个小时来解决这个问题。据我所知，React Native 测试库没有这个匹配器，Jest Native 匹配器扩展器也没有。

看起来Detox支持它。

有很多建议使用 refs （这可能让我们调用 ref.current.isFocused()），或捕获 onFocus\onBlur 事件。但从测试环境的角度来看，这些都是不可行的。

我从裁判那里观察到两件事。

1. 裁判们都被开玩笑地嘲笑了（我对笑话了解不够，不知道为什么）。
2. 当元素没有聚焦时，引用完全消失

关于跟踪 onFocus\onBlur，这是不必要的开销，并且为了测试而只会使生产代码进一步复杂化。然后组件必须接受这些作为道具，并且必须为每个道具创建一个模拟......不，谢谢！

我决定在 Jest Native 项目中提出功能请求功能请求。交叉手指。

React.js 用户就这么简单！