6

反応コンポーネントを介してレンダリングされるいくつかの d3 要素のテストを作成しようとしています。ページ上のいくつかの svg 要素を選択し、それらの幅をチェックして、期待どおりに動作しているかどうかを確認できるようにしたいと考えていました。

ReactComponentツリーと言うときに、react test-utilsドキュメントが何を期待しているのか完全にはわかりません。

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>

...そして、私は要素を見つけようとしています。

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 に答える