单元测试检查 React 组件的顺序

Question

我有一个名为 Page 的 React 组件，其中包含 2 个组件 a 和 b，如下所示 -

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

在我的单元测试中，我想确认组件的顺序，即“component-a”是否在“component-b”之前。

通过shallow wrapper docs，我觉得我必须遍历所有孩子，直到找到组件-a。如果我在此之前找到了 component-b，则为 false，否则为 true。

有没有更好的方法来实现上述目标？如果我能有一个方法给我一个给定元素的子位置，那就太好了。

现在我只检查“组件-a”的存在，这还不够（如下所示）。

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