reactjs - Jest - 如何使用 id 查找渲染的 DOM 组件？

Question

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

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

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

Answer 1

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

在您的情况下，查找具有给定 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 节点。