4

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?

Kyle S.
  • 147
  • 2
  • 9
  • I know that jQuery added support for Node.js on 2.1.x. Did anybody tested it being used together with React Test Utils? I think jQuery isn't the best option on the client anymore. But it would be a hell of a testing tool for Angular and React on the server – Andre Pena Aug 07 '15 at 20:53
  • It 's unreal http://blog.sodhanalibrary.com/2016/11/reacttestutils-find-element-by.html#.Wfh8EhO0Oi4 – zloctb Oct 31 '17 at 13:59

2 Answers2

1

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"]');
Thomas Zimmermann
  • 101
  • 7
0

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.

Kyle S.
  • 147
  • 2
  • 9