Jest - 如何找到带有 id 的渲染 DOM 组件？

【问题标题】：Jest - How to find rendered DOM component with id?Jest - 如何找到带有 id 的渲染 DOM 组件？
【发布时间】：2015-06-23 10:14:50
【问题描述】：

我正在编写一个简单的 Jest 测试来验证我的组件是否已呈现。我看到 React 的 TestUtils 具有按类或标签查找渲染组件的功能，但不是通过它们的 ID 属性。有一个findAllInRenderedTree 函数，但文档没有解释回调应该期待什么。

我猜回调会收到某种元素对象，它不是普通的 DOM 元素或普通的 React 组件。究竟传递给findAllInRenderedTree 的回调的是什么，我应该如何获取它的属性，或者至少是它的ID？

我只会 console.log 回调的参数，但我很难让控制台在 Jest 测试中工作。

【问题讨论】：

标签： reactjs jestjs

【解决方案1】：

findAllInRenderedTree 的回调参数传递了一个组件实例，并应返回一个布尔值，指示该组件是否应保留在输出数组中。

在您的情况下，查找具有给定 id 的所有渲染 DOM 组件：

function scryRenderedDOMComponentsWithId(tree, id) {
  return TestUtils.findAllInRenderedTree(tree, function(inst) {
    return TestUtils.isDOMComponent(inst) && inst.getAttribute("id") === id;
  });
}

如果您需要针对实际 DOM 节点的属性进行测试，可以使用React.findDOMNode(inst) 检索给定组件实例的 DOM 节点。

【讨论】：

读到这个：stackoverflow.com/questions/32246645/…，从现在开始应该是：return isDOMComponent(inst) && inst.getAttribute('id') === id;