Check rendered text with enzyme - react-native

Question

I'm using react-native and I want to test some functionality.
I want to check when I insert some text to the component like: "barak walk".
It changes to "BARAK WALK".
when it's too long compare it to "BARAK WALK...".
I don't know how to check it with enzyme( i prepare don't use snapshot this time)
Code:
export default ({ text }: Props): JSX.Element => {
return (
<View style={styles.box}>
<Text numberOfLines={1} style={cardText}>
{text}
</Text>
</View>
);
};
const styles = StyleSheet.create({
box: {
height: 160,
width: 160,
},
cardText: {
color: Colors().ALWAYS_WHITE,
textAlign: 'center',
fontSize: 12,
fontFamily: AleckFonts.SANS_MEDIUM,
letterSpacing: 0.4,
lineHeight: 15,
padding: 6,
paddingLeft: 20,
paddingRight: 20,
textTransform: 'uppercase',
},
});
I tried this one but it doesn't render the text:
test('Should check if text shown as expected', () => {
const receivedText = 'barak walk';
const expectedText = 'BARAK WALK';
const wrapper = shallow(<Card text={receivedText} />);
const textView = wrapper.find(Text).children();
expect(textView.text()).toBe(expectedText);
});

Answer 1

Few things to try:
(1) Don't use children at all
const textView = wrapper.find(Text); // <----take out children prop
expect(textView.text()).to.equal(expectedText);
Also because you are using CSS to change the casing of the text, it will still render as lowercase.
Example - barak walk is rendering as barak walk but due to css styling, it's shown to you in all uppercase.
So, in your assertion, if write your original test like so, it should pass:
const textView = wrapper.find(Text); // <--- try
expect(textView.text()).toBe(receivedText); //<---- receivedText is gona be lowercase
This is because receivedText will be all lowercase.
Adding ... at the end when string is too long
function handleLongString(str, desiredLength){
return str.length > desiredLength ? str.slice(0,desiredLength) + "..." : str;
}
Then you can use this in your code like so:
<Text>{ handleLongString(text) }</Text>