笑话和酶。查找包装器内所有元素的数量答案

【问题标题】：Jest & Enzyme. Find amount of all elements inside wrapper笑话和酶。查找包装器内所有元素的数量
【发布时间】：2020-05-01 04:32:38
【问题描述】：

开玩笑和酶。如何在包装器中查找所有元素（孩子、孩子的孩子等）的数量。 wrapper.children().length 仅输出包装器的直接子代

【问题讨论】：

你试过.find(cssSelector)吗？
我需要找到所有节点。如何用 .find() 做到这一点？

标签： reactjs testing jestjs enzyme

【解决方案1】：

第一种最简单的方法：

在组件中的每个元素上使用.find()，因此如果您的组件有 div、h1 和一个名为

的自定义组件

那么你会这样做：

const divs = wrapper.find('div');
const h1s = wrapper.find('h1');
const headers = wrapper.find(Header);

expect(divs.length + h1s.length + headers.length).toBe(yourExpect);

第二种动态方式：

使用 DFS 或 BFS 递归循环遍历包装器的子级及其子级。每个节点都有一个子节点的属性，它是一个数组（如果我没记错的话），然后您可以循环遍历每个节点以及长度到一个名为 numberOfElementsInComponent 的变量。

类似这样的：

let numberOfElementsInComponent = 0;

const dfsThroughNode = (node) => {
  if (node.children) {
    node.children.forEach((childNode) => {
      dfsThroughNode(childNode);
    });
  }
  numberOfElementsInComponent += 1;
};

it('yourTest', () => {
  const wrapper = shallow(<Component />);

  wrapper.children().forEach((childNode) => {
    dfsThroughNode(childNode);
    numberOfElementsInComponent += 1;
  });

  expect(numberOfElementsInComponent).toBe(yourExpect);
});

例如这样的。

【讨论】：