如何使用 React Native 测试库查询具有特定文本的按钮

Question

我正在尝试在 React Native 中查询带有特定文本的按钮（是的，还有另一个类似的问题，但它对我不起作用）。我想 getByRole 我屏幕的 'Login' 按钮，但它也得到我的 'Register' 按钮。

 it('renders buttons', () => {
    const {getByRole} = render(<LoginScreen />);
    getByRole('button', {description: 'Login'});
  });

这是我得到的错误

renders buttons

    Expected 1 but found 2 instances with accessibilityRole "button"

      11 |   it('renders buttons', () => {
      12 |     const {getByRole} = render(<LoginScreen />);
    > 13 |     getByRole('button', {description: 'Login'});
         |     ^
      14 |   });

这是代码：

import React, {useState} from 'react';
import {SafeAreaView, View, StyleSheet} from 'react-native';
import {Card, TextInput, Button} from 'react-native-paper';

const axios = require('axios').default;

export const LoginScreen = props => {
  const [username, setUsername] = useState();
  const [password, setPassword] = useState();

  const register = () => props.navigation.navigate('Register');
  const home = () => props.navigation.navigate('Home');

  return (
    <SafeAreaView>
      <View>
        <Card>
          <Card.Title title="Login" />
          <Card.Content>
            <TextInput
              accessibilityLabel="Username"
              placeholder="example"
              onChangeText={txt => setUsername(txt)}
              defaultValue={username}
            />
            <TextInput
              accessibilityLabel="Password"
              placeholder="***"
              onChangeText={txt => setPassword(txt)}
            />
          </Card.Content>
          <Card.Actions style={style.button}>
            <Button
              onPress={() => {
                axios({
                  method: 'post',
                  url: 'http://10.0.2.2:8000/login',
                  data: {username: username, password: password},
                })
                  .then(response => {
                    console.log('0', response);
                    home();
                  })
                  .catch(error => {
                    console.log('1', error);
                  });
              }}>
              Login
            </Button>
            <Button onPress={register}>Register</Button>
          </Card.Actions>
        </Card>
      </View>
    </SafeAreaView>
  );
};

const style = StyleSheet.create({
  button: {flexDirection: 'row', justifyContent: 'flex-end'},
});

我也试过类似的查询 getByText('Login', {selector : 'button'}) 和 getByRole('button', {name : 'Login'})

我只想得到一个带有特定文本的按钮，而不是得到另一个带有不同文本的按钮。但我真的感觉无论我做什么，第二个参数都被忽略了。

谁能帮我解决这个问题？

Answer 1

你试过了吗quarySelectorAll？

document.querySelectorAll('[role="button"][value="Login"]')[0]

确保您的按钮值确实是“登录”。如果它是您指定的名称属性，您也可以使用 [name="Login"]。

Answer 2

最简单的解决方法是为按钮分配一个 testID，然后使用 react-native-testing-library 中的 getByTestId。

// in component
<Button
  testID='LoginButton'
  ...

// in test
const { getByTestId } = render(<LoginScreen />);
expect(getByTestId('LoginButton')).toBeDefined();

如何使用 React Native 测试库查询具有特定文本的按钮

How to query a button with specific text with react native testing library

javascript

jestjs

react-native

react-native-testing-library

testing-library