反应本机无法找到具有 testID 的元素

Question

我收到此错误：

Unable to find an element with the testID of: input-text

输入.js：

import React from "react";
import { View, StyleSheet } from "react-native";
import { Text, TextInput } from "react-native-paper";

const Input = (props) => {
  return (
    <View>
      <TextInput
        name={props.name}
        keyboardType={props.keyboardType}
        value={props.value}
        label={props.label}
        mode="outlined"
        onChange={(newVal) => props.onChange(props.name, newVal)}
        required={props.required}
        data-testid="input-text"
      />
      <Text>{props.errors}</Text>
    </View>
  );
};

export default Input;

输入 test.js：

import React from "react";
import { Input } from "../components/common";

import { render, fireEvent } from "@testing-library/react-native";

import renderer from "react-test-renderer";

const setup = () => {
  const utils = render(<Input />);
  const input = utils.getByTestId("input-text");
  return {
    input,
    ...utils,
  };
};

test("It should display empty value", () => {
  const { input } = setup();
  fireEvent.change(input, { target: { value: "" } });
  expect(input.value).toBe("");
});

我使用的原因getByTestId是因为输入名称是动态的，它使用表单多次呈现，因此我不能使用其他任何东西。

我究竟做错了什么？

谢谢您的帮助。

Answer 1

我也遇到了同样的事情。正如错误消息所解释的，测试库正在寻找名为 的 prop testID，而不是data-testid核心文档中提到的。尝试将道具更改为testID="input-text"，它应该可以工作。

Answer 2

Ciao，根据本指南，要测试onChange事件，TextInput您必须：

1. 安装react-test-renderer：

   npm i react-test-renderer
   

2. 像这样修改输入组件：

    const Input = (props) => {
    constructor() {
      super();
      this.state = {
          myVal: ''
      };
    }
   
    handleNewVal = (newVal) => {
       this.setState({myVal: newVal});
    }
   
     return (
     <View>
       <TextInput
         name={props.name}
         keyboardType={props.keyboardType}
         value={props.value}
         label={props.label}
         mode="outlined"
         onChange={(newVal) => this.handleNewVal(newVal)}
         required={props.required}
         data-testid="input-text"
       />
       <Text>{props.errors}</Text>
    </View>
   );
   };
   

3. 按如下方式修改您的测试：

   import renderer from 'react-test-renderer';
   
   test("It should display empty value", () => {
     const instanceOf = renderer.create(<Input />).getInstance();
     instanceOf.handleNewVal('');
     expect(instanceOf.state.myVal).toEqual('');
   });