React-Navigation V6 Drawer.Item设display:none后react-test-renderer仍渲染问题

问题1解答 #

这个属于预期行为。display: "none"属于样式层的隐藏规则，仅会让原生渲染层不绘制对应组件，组件本身仍然会被挂载到React渲染树中。而react-test-renderer以及React Native Testing Library的getBy*查询规则默认只判断组件是否存在于渲染树中，不会判断样式层面的可见性，因此可以正常查询到设置了隐藏样式的DrawerItem。

问题2解答 #

有两种更适配不同场景的实现方案：

• 仅需要样式层面隐藏、后续还要快速切换显示的场景：可以继续使用当前的drawerItemStyle切换display值的方案，该方案原生端性能表现良好，切换没有额外的挂载卸载开销。
• 需要完全不渲染隐藏项、避免多余节点存在的场景：可以直接在Screen的options中配置drawerItem: () => null，该配置会让Drawer完全不生成对应的Item节点，适合不需要频繁切换显隐的场景。如果有多个DrawerItem需要动态控制，也可以自定义drawerContent，根据状态动态生成需要展示的Item列表，灵活度更高。

问题3解答 #

针对不同的实现方案有对应的更简洁的测试方案：

• 如果你使用样式隐藏的方案：可以直接引入@testing-library/jest-native的扩展断言，直接使用expect(getByText("Title")).not.toBeVisible()即可完成可见性判断，不需要手动遍历节点捞取样式属性，代码更简洁易读。
• 如果你使用不渲染节点的方案：直接使用queryByText("Title")查询对应节点，断言返回结果为null即可，测试逻辑更直观。

你自行实现的属性校验方案也可正常使用，适合没有引入断言扩展库的场景。

内容的提问来源于stack exchange，提问作者Joey Gough