Find component using CSS selector in TestUtils
I write some simple tests for its components using React TestUtils , and I find that the methods TestUtils.FindRenderedDOMComponentWithClass
and TestUtils.FindRenderedDOMComponentWithTag
fairly limited . I would like to find a component using a typical CSS selector (i.e. tag.class [attr]
), but it doesn't seem like an option.
Is there an easy way to find an element with a specific attribute? If there are no useful tools for finding components other than TestUtils
?
source to share
I find it useful to use a browser Element.querySelector()/querySelectorAll()
for DOM elements.
You can simply call for example:
var domElement = FindRenderedDOMComponentWithClass('myClass');
var firstTextInput = domElement.querySelector('input[type="text"]');
source to share
React.TestUtils
doesn't offer searching for components using CSS selectors, so I went with a light base class extension TestUtils
called react-testutils-addition . It offers a method find()
that parses a CSS selector style input and uses it TestUtils.findAllInRenderedTree
to find a component.
source to share