0

I'm using react-native and I want to test that when I insert some text to the component like: "barak walk".

when it's too long it converts it to "barak walk...".

I built the component and it worked as I excepted, but the test didn't

export const Card =({ text }: Props): JSX.Element => {
  return (
    <View style={{width:160}}>
        <Text numberOfLines={1} style={cardText}>
          {text}
        </Text>
      </View>
  );
};

test('Long text should convert to 3 dots', () => {
  const longText = 'barak walk aaaaaaaaaaaaa';
  const expectText = 'barak walk...'
  const wrapper =  mount(<Card text={longText} />)
  const textView = wrapper.find(Text);
  expect(textView.text()).toBe(expectText);
});

I get this error:

 Expected: "barak walk..." 
 Received: "barak walk aaaaaaaaaaaaa"
Barak
  • 504
  • 8
  • 26
  • It fails because that you have width:160 in View doesn't affect Text. – Estus Flask Nov 01 '20 at 12:18
  • @Estus Flask,Tanks for the response, so how can i test it ? – Barak Nov 01 '20 at 13:17
  • See https://stackoverflow.com/questions/7738117/html-text-overflow-ellipsis-detection . Jest DOM is probably not the best place for such tests because it doesn't work like real thing. Save this for e2e tests. – Estus Flask Nov 01 '20 at 13:57

0 Answers0