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

Question

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

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

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

Answer 1

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

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

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

Jest - How to find rendered DOM component with id?

reactjs

jestjs