如何测试TextInput在react-native与@testing-library/ real -native?&l

Question

我试图通过检查输入字符串后的值来测试TextInput，但它不工作。如有任何帮助，不胜感激。

代码如下:

import React from 'react'
import { TextInput } from 'react-native'
import { fireEvent, render } from "@testing-library/react-native"
test('<TextInput/>, () => {
const { getByTestId } = render( <TextInput testID="input" /> );
const input = getByTestId("input");
fireEvent.changeText(input, "123");
expect(input.value).toBe("123");
})

测试失败，提示:

Expected: "123"
Received: undefined

Answer 1

我认为你的例子不工作，因为你没有控制输入。尝试添加一个value和一个onChangeText功能。比如:

function Example() {
const [value, setValue] = useState('')
return <TextInput value={value} onChangeText={setValue} testID="input" />
}
test('Should apply the value when changing text', () => {
const { getByTestId } = render(<Exampler />);
const input = getByTestId('input');
fireEvent.changeText(input, '123');
expect(input.props.value).toBe('123');
});

另外，需要检查input.props.value而不是input.value希望能有所帮助。

Answer 2

我将建议一些事情来帮助你找到解决方案，

• 你确定TextInput有一个叫做testID的道具吗?随后使用getByTestId，这需要元素上的data-testid值。所以请先确定这一点。
• 您可以尝试用另一种方法找到该元素。可能使用getByPlaceholderText或类似的。

一旦您可以正确地获得元素，并且在fireEvent之后，值当然应该被更新，并且断言将成功。