In jest tests - the ellipsis always show, regardless of whether it truncates.

[dwjohnston]

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.

[rodrigoBerlochi]

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.