How to test the value of TextInput in react-native - react-native

Question

I followed the chosen answer in this thread, but I couldn't figure it out. I want to test the value of a TextInput component so I could check the length of it, what is the proper way to achieve this today?
My component looks something like this:
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"
/>
);
}
And the test file I constructed so far:
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

I think what you're trying to do is to limit the initial text passed in props to the maxLength of characters passed.
in your component useEffect() ,
instead of:
props.text ? setText(props.text) : setText('');
slice the initial text:
props.text ? setText(props.text.slice(0, maxLength)) : setText('');
that should work for having the text length less than the maxLength too.