在 TestUtils 中使用 CSS 选择器查找组件答案

【问题标题】：Find component using CSS selector in TestUtils在 TestUtils 中使用 CSS 选择器查找组件
【发布时间】：2015-10-31 09:20:12
【问题描述】：

我正在使用 TestUtils 为我的 React 组件编写一些简单的测试，我发现 TestUtils.FindRenderedDOMComponentWithClass 和 TestUtils.FindRenderedDOMComponentWithTag 方法都非常限制。我想使用典型的 CSS 选择器（即tag.class [attr]）找到一个组件，但这似乎不是一个选项。

有没有一种简单的方法可以找到具有特定属性的元素？如果没有，除了TestUtils，还有什么有用的工具可以找到组件吗？

【问题讨论】：

我知道 jQuery 在 2.1.x 上增加了对 Node.js 的支持。有人测试过它与 React Test Utils 一起使用吗？我认为 jQuery 不再是客户端的最佳选择。但这将是 Angular 和 React 在服务器上的测试工具
这是不真实的blog.sodhanalibrary.com/2016/11/…

标签： jasmine reactjs reactjs-testutils

【解决方案1】：

React.TestUtils 确实不提供带有 CSS 选择器的组件搜索，所以我选择了一个名为 react-testutils-addition 的基本 TestUtils 类的轻量级扩展。它提供了一个 find() 方法来解析 CSS 选择器样式输入并使用 TestUtils.findAllInRenderedTree 来查找组件。

【讨论】：

【解决方案2】：

我发现在 DOM 元素上简单地使用浏览器的 Element.querySelector()/querySelectorAll() 方法很有用。

你可以像这样调用：

var domElement = FindRenderedDOMComponentWithClass('myClass');
var firstTextInput = domElement.querySelector('input[type="text"]');

【讨论】：