如何使用react-testing library检查元素是否以特定的排序方式呈现？

Question

通过以用户为中心的方法，我对RTL的理解是，元素的测试排序应该看起来像这样。

const foo = queryByText('foo');
const bar = queryByText('bar');
expect(foo).toBeInTheDocument();
expect(bar).toBeInTheDocument();
expect(foo).toShowBefore(bar); // THIS IS MY PSEUDOCODE

然而，我在RTL语言中找不到.toShowBefore()或等效的函数。测试内容是否按特定顺序显示的正确方法是什么？

Answer 1

我不相信React Testing Library有一种惯用的方式来做这件事。但是，如果您能够解析DOM，那么您应该能够获得各种元素的textContent并对其进行断言。

const select = screen.getByTestId('select');
const children = select.children;

expect(children.item(0)?.textContent).toEqual('Interface A');
expect(children.item(1)?.textContent).toEqual('Interface B');
expect(children.item(2)?.textContent).toEqual('Interface C');

Answer 2

您可以为每一行分配一个测试id：

<tr data-testid='row'>...</tr> 

然后期望行是按顺序排列的：

const rows = screen.getAllByTestId('row')

expect(within(rows[0]).queryByText('A')).toBeInTheDocument()
expect(within(rows[1]).queryByText('B')).toBeInTheDocument()
expect(within(rows[2]).queryByText('C')).toBeInTheDocument()