Как проверить значение TextInput в react-native

Question

Я следил за выбранным ответом в этой ветке, но не мог его понять. Я хочу протестировать значение компонента 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

Я думаю, вы пытаетесь ограничить исходный текст, передаваемый в реквизитах, максимальной длиной переданных символов.

в вашем компоненте useEffect(),

вместо:

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

разрезать исходный текст:

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

, что должно работать и для длины текста меньше maxLength.