javascript - 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匹配器）。

标签： javascriptreactjsreact-nativereact-testing-libraryreact-native-testing-library

Answer 1

今天沉没几个小时。据我所知，React Native 测试库没有这个匹配器，Jest Native 匹配器扩展器也没有。

看起来Detox支持它。

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

我在裁判中观察到了两件事。

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

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

我决定在 Jest Native 项目中打开一个功能请求。交叉你的手指。

React.js 用户使用起来非常简单！