查找屏幕上没有测试文本的按钮答案

【问题标题】：Finding the buttons on the screen that have no text for the test查找屏幕上没有测试文本的按钮
【发布时间】：2022-11-06 18:24:57
【问题描述】：

我正在尝试为 NavBar 组件（使用 react-native-testing-library）编写测试，该组件具有几个基本上只是图标的按钮（使用 ui-kitten 进行本机反应）。因此，我无法通过文本获取这些按钮（因为没有），但其他方法对我也不起作用（例如添加 accesibilityLabel 或 testID，然后通过标签文本获取/通过测试 ID 获取）。任何想法我做错了什么？

// NavBar.tsx
import React from 'react';
import {View, StyleSheet} from 'react-native';
import {HomeBtn, SaveBtn} from '../components/buttons';
import UserSignOut from './UserSignOut';

const NavBar = ({
  navigation,
  pressHandlers,
}) => {
  return (
    <View style={styles.navBar}>
      <View>
        <HomeBtn navigation={navigation} />
        <SaveBtn pressHandler={pressHandlers?.saveBtn ?? undefined} />
      </View>
      <UserSignOut />
    </View>
  );
};
export default NavBar;

// HomeBtn.tsx
import React from 'react';
import {Button} from '@ui-kitten/components';
import {HomeIcon} from '../shared/icons';
import styles from './Btn.style';

export const HomeBtn = ({navigation}: any) => {
  return (
    <Button
      accesibilityLabel="home button"
      style={styles.button}
      accessoryLeft={props => HomeIcon(props, styles.icon)}
      onPress={() => navigation.navigate('Home')}
    />
  );
};

// NavBar.test.tsx
import React from 'react';
import {render, screen} from '@testing-library/react-native';
import * as eva from '@eva-design/eva';
import {RootSiblingParent} from 'react-native-root-siblings';
import {EvaIconsPack} from '@ui-kitten/eva-icons';
import {ApplicationProvider, IconRegistry} from '@ui-kitten/components';
import NavBar from '../../containers/NavBar';

describe('NavBar', () => {
  const navBarContainer = (
    <RootSiblingParent>
      <IconRegistry icons={EvaIconsPack} />
      <ApplicationProvider {...eva} theme={eva.light}>
        <NavBar />
      </ApplicationProvider>
    </RootSiblingParent>
  );
  it('should render the buttons', async () => {
    render(navBarContainer);
    // this test fails (nothing is found with this accesibility label)
    await screen.findByLabelText('home button');
  });
});

【问题讨论】：

screen.getByRole('button') 也没有找到任何元素 =/
我从不使用反应，但你不能只按属性选择按钮吗？
不知道我会如何在 React Native 中做到这一点

标签： javascript react-native jestjs react-native-testing-library react-native-ui-kitten

【解决方案1】：

await screen.findByA11yLabel('home button') 有效吗？它应该与 accessibilityLabel 属性匹配。

【讨论】：

等待 screen.findByLabelText('主页按钮'); - 这没有找到任何东西
findByA11yLabel，你正在使用findByLabelText
类型 '{ update: (component: ReactElement<any, string | JSXElementConstructor<any>>) => void 上不存在属性 'findByAllyLabel'
我的智能感知没有在屏幕上显示此选项

【解决方案2】：

查询谓词

推荐的解决方案是使用：

getByRole('button', { name: "home button" })

因为它需要button 角色，以及使用name 选项检查accessibilityLabel。

另一种但表达力稍差的方法是使用：

getByLabelText('home button')

这个查询只会检查accessibilityLabel prop，它也应该可以正常工作。

为什么查询不匹配

由于您要问为什么查询不起作用，这取决于您的测试设置。它似乎没有直接渲染HomeBtn，但看起来您希望它由NavBar 渲染。

这里可能发生了几件事，但是由于您已经在等待使用findBy（而不是同步getBy），那么看起来NavBar实际上由于某种原因从未渲染HomeBtn，可能是不正确的模拟或丢失一些动作等

在常规导航栏中，您应该能够使用同步查询getBy，除非您需要导航栏来获取一些异步数据等。

您可以使用 RNTL 中的 debug() 函数来检查渲染组件的当前状态。

【讨论】：