Question

我在this线程中遵循了选定的答案，但是我无法弄清楚。我想测试TextInput组件的值，以便检查它的长度，今天实现此目的的正确方法是什么？
我的组件看起来像这样：

import React, {useState, useEffect} from 'react';
import {TextInput} from 'react-native';

export default function TextInputComponent(props) {
    const [text, setText] = useState('');

    useEffect(() => {
        props.text ? setText(props.text) : setText('');
    }, []);

    const handleInputTextChange = text => {
        setText(text);
    };

    return (
        <TextInput
            onChangeText={text => handleInputTextChange(text)}
            value={text}
            maxLength={maxLength}
            testID="text-input"
        />

    );
}

还有我到目前为止构建的测试文件：

import React from 'react';
import renderer from 'react-test-renderer';
import {render} from 'react-native-testing-library';
import TextInputComponent from 'components/textInputComponent/textInputComponent';

describe('<TextInputComponent />', () => {
    it('renders correctly', () => {
        renderer.create(<TextInputComponent />);
    });

    it('should show "AAA" with text="AAAA" and maxLength="3" props', () => {
        const props = {
            text: 'AAAA',
            maxLength: 3,
        };

        const {queryByTestId} = render(<TextInputComponent {...props} />);

        const textInput = queryByTestId('text-input');

        console.log(textInput);
    });
});

Answer 1

我认为您要尝试将在props中传递的初始文本限制为所传递字符的maxLength。

在组件useEffect()中，

代替：

props.text ? setText(props.text) : setText('');

切片初始文本：

props.text ? setText(props.text.slice(0, maxLength)) : setText('');

应该也可以使文本长度也小于maxLength。

如何在react-native中测试TextInput的值

1 个答案: