Question

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

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

在我的单元测试中，我想确认组件＆＃39;订购，即＆＃34;组件-a＆＃34;来自＆＃34; component-b＆＃34;。

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

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

现在我只检查＆＃34; component-a＆＃34;这还不够（如下）。

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

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

1 个答案: