Модульный тест для проверки порядка компонентов React

Question

У меня есть компонент React, называемый Page, который содержит 2 компонента a и b, как показано ниже -

<div>
<div id="component-a"></div>
<div id="component-b"></div>
</div>

В моем модульном тесте я хочу подтвердить упорядочение компонентов, т. Е. Если появляется "component-a"до "component-b".

Проходя через мелкие документы обертки , я чувствовал, что мне придется перебирать всех потомков, пока я не найду компонент-a.Если я найду компонент-b до этого, тогда false иначе true.

Есть ли лучший способ достичь вышеуказанного?Было бы замечательно, если бы у меня был метод, который давал бы мне дочернюю позицию данного элемента.

Пока я проверяю только наличие «компонента-а», которого недостаточно (как ниже).

const wrapper = mount(<Page {...props} />);
expect(wrapper.find('.component-a')).toHaveLength(1);

Answer 1

const wrapper = shallow(<Page {...props} />);
const elementsOrder = [];

for(let order = 0; order < wrapper.children().length; order++) {
    elementsOrder.push(wrapper.children().at(order).prop('id'));
}

expect(elementsOrder.indexOf('component-a')).toBeLessThan(elementsOrder.indexOf('component-b'));