react-testing-library：验证文本截断

Question

我有一个组件“Label”，它具有基本的截断支持：

import "./styles.css";
export default function Label(props) {
  const className = props.truncate ? "truncate" : "";
  return <label className={className}>{props.children}</label>;
}

truncate css class:

.truncate {
  display: inline-block;
  overflow: hidden;
  white-space: pre;
  text-overflow: ellipsis;
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
}

这是一个 codesandbox，它演示了组件，它是 truncation prop:

现在我想为截断功能添加一些测试范围。我正在使用 react-testing-library，但是 我不确定断言文本末尾在截断时不可见的最佳方式。

这是我的尝试：

const longText = 'START Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac commodo massa END';
describe('Label', () => {
  it('displays long text', () => {
    render(<Label>{longText}</Label>);
    expect(screen.getByText(/^START/)).toBeInTheDocument(); // pass
    expect(screen.getByText(/END$/)).toBeInTheDocument(); // pass
  });
  it('displays long text with truncation', () => {
    render(<Label truncate={true}>{longText}</Label>);
    expect(screen.getByText(/^START/)).toBeInTheDocument(); // pass
    expect(screen.queryByText(/END$/)).not.toBeVisible(); // FAILURE
  });
});

最后一个 expect 失败：

Received element is visible:
    <label class="truncate" />

我知道我可以测试 class 名称是否存在，但我们的团队认为依靠它是一种糟糕的做法。

是否有测试文本截断的最佳实践方法？

Answer 1

如果您在使用 truncate 渲染后立即添加 screen.debug，如下所示：

render(<Label truncate={true}>{longText}</Label>);

screen.debug();

输出将是：

<label class="truncate">
      START Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac commodo massa END
</label>

如您所见，整个文本都已呈现，使文本 visible/not 可见的是 css overflow 属性.

也就是说，我认为最好的方法是验证组件是否具有 overflow 属性:

expect(screen.getByText(/^START/)).toHaveStyle("overflow: hidden");

react-testing-library：验证文本截断

react-testing-library: Verify text truncation

reactjs

react-testing-library

truncation