Question

我正在尝试为通过react组件呈现的一些d3元素编写测试，我希望能够在页面上挑选出一些svg元素并检查它们的宽度，看看它们是否表现出来如预期的那样。

我不完全确定当他们说ReactComponent树时反应test-utils docs的期望是什么。

array scryRenderedDOMComponentsWithClass(ReactComponent tree, string className)

我通过以下方式将我的组件渲染到文档中：

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

我可以通过执行以下操作成功检查css className：

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

但是我不明白我需要为这些期望ReactComponent树的find / scry方法提供什么。

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

编辑：

有关更多说明，此组件的呈现DOM如下所示：

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

......而我正试图找到这个元素。

Answer 1

据我所知，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，然后才能检查它的断言。

当test-utils引用ReactComponent树时，它会有什么反应呢？

1 个答案: