Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What does react test-utils expect when it refers to ReactComponent tree?

Tags:

reactjs

jestjs

I'm trying to write tests for some d3 elements that are rendered via react component, and I was hoping to be able to pick out some of the svg elements on the page and check their width to see if they're behaving as expected.

I'm not entirely sure what the react test-utils docs are expecting when they say ReactComponent tree.

array scryRenderedDOMComponentsWithClass(ReactComponent tree, string className)

I'm rendering my component into the document via:

  var component = TestUtils.renderIntoDocument(
    <ProgressCircle percentage={75} />
  );

And I'm able to successfully check for a css className by doing:

  it('should render an element with the class "progress-circle"', function() {
    var circleContainer = TestUtils.findRenderedDOMComponentWithClass(component, 'progress-circle');
    expect(circleContainer).toBeDefined();
  });

But I don't understand what I need to provide to some of these find / scry methods that expect a ReactComponent tree.

http://facebook.github.io/react/docs/test-utils.html

Edit:

For more clarification, the rendered DOM for this component looks like this:

<div class="progress-circle">
  <svg>
    <g>
    </g>
  </svg>
</div>

... and I'm trying to find the element.

like image 410
Patrick C Avatar asked Jan 22 '15 16:01

Patrick C


1 Answers

From what I understand, TestUtils.renderIntoDocument() returns a ReactComponent tree. Then you can pull individual components out of that tree to test them.

For example, this test passes for me.

it('demonstrates the ReactComponent tree', function() {
  var React = require('react/addons');
  var TestUtils = React.addons.TestUtils;
  var MyComponent = require('../MyComponent.jsx');

  var renderedTree = TestUtils.renderIntoDocument(<MyComponent />);
  var renderedMyComponent = TestUtils.findRenderedDOMComponentWithClass(renderedTree, 'my-component')

  expect(TestUtils.isDOMComponent(renderedMyComponent)).toBe(true);
});

So if you're just rendering a single component, it will be the root of the renderedTree. But you still have to find the rendered MyComponent inside the renderedTree before you can check assertions against it.

like image 114
allanlasser Avatar answered Oct 19 '22 08:10

allanlasser