Найти компонент с помощью селектора CSS в TestUtils

Question

Я пишу несколько простых тестов для моих Реагировать компоненты с использованием TestUtils, и я нахожу, что оба TestUtils.FindRenderedDOMComponentWithClass и TestUtils.FindRenderedDOMComponentWithTag методы довольно ограничения. Я хотел бы найти компонент, используя типичный селектор CSS (т. Е. tag.class [attr]), но это не похоже, что это вариант.

Есть ли простой способ найти элемент с определенным атрибутом? Если нет полезных инструментов для нахождения компонентов, кроме TestUtils?

Answer 1

React.TestUtils делает не поиски предложения компонентов с CSS селекторов, так что я пошел с легким расширением основного TestUtils класса под названием react-testutils-addition. Он предлагает метод find(), который анализирует ввод стиля селектора CSS и использует TestUtils.findAllInRenderedTree для поиска компонента.

Answer 2

Мне удобно использовать метод браузера Element.querySelector()/querySelectorAll() для элементов DOM.

Вы можете просто позвонить, например, так:

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