react-truncate
react-truncate copied to clipboard
In jest tests - the ellipsis always show, regardless of whether it truncates.
I have a component like this:
export const Chip = (props: ChipProps) => {
const { className, color, text, onDeleteClick, onClick } = props;
const [isTruncated, setIsTruncated] = useState(false);
return (
<StyledTooltip
title={text}
disableHoverListener={!isTruncated}
arrow
ariaLabel={text}
placement="left"
>
<StyledChip
className={`${color} ${className}`}
label={
<Truncate lines={1} ellipsis="..." onTruncate={setIsTruncated}>
{text}
</Truncate>
}
onClick={onClick}
onDelete={onDeleteClick}
/>
</StyledTooltip>
);
};
Basically it's a chip with max width, but if the label is too long then we truncate the text, but show the full label in a tooltip.
This is working fine in the browser, but I'm getting weird behaviour when trying to write tests for this.
I have jest/enzyme tests that look like this:
const chip = wrapper.find(Chip);
expect(chip.text()).toEqual('example 1');
But the Chip text will always display as example 1...
. This regardless of how short or long the passed in text is.
If I do a debug of that component we can see that the Truncate looks like:
<Truncate lines={1} ellipsis="..." onTruncate={[Function: bound dispatchAction]} trimWhitespace={false} width={0}>
<span width={0}>
<span />
<span>
example 1
</span>
<span style={{...}}>
...
</span>
</span>
</Truncate>
With the span with ellipsis showing.
What's going on here? I'm suprised that no one else in the issues has mentioned anything like this.
I had the same problem. I'm using Jest/React Testing Library. And other truncate libraries have the same issue. We couldn't find yet a proper way to test components using truncation.