How to check elements are rendered with a specific sorting with react-testing-library?

Question

With its user-centric approach, my understanding of RTL is that testing sorting of elements should look something like.

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

However, I couldn't find a .toShowBefore() or equivalent function in RTL. What's the correct way to test that content is displayed in a certain order?

Answer 1

I don't believe React Testing Library has an idiomatic way to do this. But if you can parse your DOM, then you should be able to get the textContent of various Elements and assert on that.

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');