jasmine - 在 TestUtils 中使用 CSS 选择器查找组件

Question

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

有没有一种简单的方法来查找具有特定属性的元素？如果没有，是否有任何有用的工具可以找到除了 之外的组件TestUtils？

Answer 1

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

您可以像这样调用例如：

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

Answer 2

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