6

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.

4

1 回答 1

7

据我了解，TestUtils.renderIntoDocument()返回一个 ReactComponent 树。然后，您可以从该树中拉出单个组件来测试它们。

例如，这个测试通过了我。

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);
});

因此，如果您只是渲染单个组件，它将是renderedTree. MyComponent但是您仍然必须先在内部找到呈现的内容，renderedTree然后才能检查针对它的断言。

于 2015-03-15T02:12:50.773 回答