Find component using CSS selector in TestUtils

Question

I'm writing some simple tests for my React components using TestUtils and I'm finding that both the TestUtils.FindRenderedDOMComponentWithClass and TestUtils.FindRenderedDOMComponentWithTag methods are pretty limiting. I'd like to find a component using the typical CSS selector (i.e. tag.class [attr]) but it doesn't seem like this is an option.

Is there a simple way to find an element with a specific attribute? If not are there any useful tools for finding components apart from TestUtils?

Answer 1

React.TestUtils does not offer component searches with CSS selectors so I went with a lightweight extension of the base TestUtils class called react-testutils-addition. It offeres a find() method which parses the CSS selector style input and uses TestUtils.findAllInRenderedTree to find the component.

Answer 2

I find it useful to simply use the browser's Element.querySelector()/querySelectorAll() method on DOM elements.

You can just call for example like this:

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