Render method ignoring overflow and text-overflow css attributes

[adamseppi]

• @testing-library/react version: 10.0.2
• Testing Framework and version: jest v26.0.0
• DOM Environment: @testing-library/jest-dom v5.5.0
• react: 16.8.6
• node: 12.18.0
• yarn: 1.22.4
• npm: 6.14.4

Issue Summary

The render method is ignoring the overflow / text-overflow css properties of components I am trying to render.

Relevant code or config:

const documentsTableCellWrapper = css({
	overflow: 'hidden',
	whiteSpace: 'nowrap',
	position: 'relative',
	display: 'flex',
	flexDirection: 'row',
	alignItems: 'center'
});

const ellipsisOverflow = css({
	display: 'inline-block',
	flex: 1,
	textOverflow: 'ellipsis',
	overflow: 'hidden',
	padding: 0,
	paddingLeft: '5px',
	margin: 0
});

...
const value = "Really long text .............even more text in here.............. and even more text";
return (
<div css={documentsTableCellWrapper}>
	<p
		css={ellipsisOverflow}
		onMouseOver={ isOverflow ? (): void => { console.log("Mouse Over") } : null}
		onMouseLeave={ isOverflow ? (): void => { console.log("Mouse Leave") } : null}
	>
		{value}
	</p>
</div>
);

What you did:

Rendering my component (a simplified version above) I'm trying to test the functionality of the listeners on the component. I fuzzy query the text that should still be available and not truncated. and it finds the component, however, it is not truncated. The full text is available and 'overflow: hidden' seems to have no affect.

I've tried setting the width / max-width of the component. and the wrapper component. I've tried rendering the component in the test inside another component with a set width / max-width. And they show up with those styles in the snapshot, but render doesn't seem to use the width attributes.

What happened:

I have rendered a snapshot to see what the result container is holding:

exports[`Counterparty Table Cell Tests Renders ellipsis with long text 1`] = `
.emotion-1 {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.emotion-0 {
  display: inline-block;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  padding: 0;
  padding-left: 5px;
  margin: 0;
}

<div>
  <div
    class="emotion-1"
  >
    <p
      class="emotion-0"
    >
      Some really long text that hopefully get's truncated and adds an ellipsis at the end!!!!!!!!!!!!!!!!!!!!!Some really long text that hopefully get's truncated and adds an ellipsis at the end!!!!!!!!!!!!!!!!!!!!!Some really long text that hopefully get's truncated and adds an ellipsis at the end!!!!!!!!!!!!!!!!!!!!!Some really long text that hopefully get's truncated and adds an ellipsis at the end!!!!!!!!!!!!!!!!!!!!!Some really long text that hopefully get's truncated and adds an ellipsis at the end!!!!!!!!!!!!!!!!!!!!!Some really long text that hopefully get's truncated and adds an ellipsis at the end!!!!!!!!!!!!!!!!!!!!!Some really long text that hopefully get's truncated and adds an ellipsis at the end!!!!!!!!!!!!!!!!!!!!!Some really long text that hopefully get's truncated and adds an ellipsis at the end!!!!!!!!!!!!!!!!!!!!!
    </p>
  </div>
</div>
`;

Reproduction:

Problem description:

I'm not able to test the condition if content overflows. This can be more generalized to the case of displaying a show more button if overflow or not if not overflowing.

Suggested solution:

Way to force the render component to abide by the width / max-width of the component so that it properly overflows.

[MatanBobi]

Hi @adamseppi, thanks for this!
Since using overflow: hidden doesn't actually truncate the text, what you see is the actual DOM as supposed to be.
To test this use case I'd suggest using aria-expanded and setting it to true or false by the behavior of your container (expanded or not).
Then in your test cases you can do (using jest-dom):
expect(yourElementHere).toHaveAttribute('aria-expanded', true).

[MatanBobi]

Hi there @adamseppi,
did my comment earlier solve your problem? can we close this issue?

[eps1lon]

queryByText currently does not respect overflow or any other form of styling that affects the displayed text. That would require quite a lot of work since we would need to implement a full layout engine to be able to determine what part of the text is displayed.

It'd be interesting to know if screen readers truncate text based on the visuals. Either way this future is probably out-of-scope. Visual regression tests are give you more confidence in these kind of tests.

Given that this issue hasn't received any attention nor response from the original author I'm closing it.