javascript - 用于检查 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 ，我觉得我必须遍历所有 child ，直到找到组件 a。如果我在此之前找到组件 b，则为 false，否则为 true。

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

目前我只检查是否存在“component-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'));