Question

我收到此错误：

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

Input.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;

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

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

Answer 2

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

安装react-test-renderer：
```
npm i react-test-renderer
```

像这样修改输入组件：

 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>
);
};

以这种方式修改测试：

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('');
});

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

2 个答案: