react-testing-library - 如何使用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

但是，我找不到 .toShowBefore()或 RTL 中的等效功能。
测试内容按特定顺序显示的正确方法是什么？

Answer 1

我不相信 React 测试库有一种惯用的方法来做到这一点。但是，如果您可以解析 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');