React test-utils 在引用 ReactComponent 树时期望什么?
What does react test-utils expect when it refers to ReactComponent tree?
我正在尝试为一些通过 React 组件呈现的 d3 元素编写测试,我希望能够挑选出页面上的一些 svg 元素并检查它们的宽度以查看它们是否'重新按预期运行。
我不完全确定 react test-utils 文档在说 ReactComponent 树时期望什么。
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>
...我正在尝试找到该元素。
据我了解,TestUtils.renderIntoDocument()
returns 一棵 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
的根。但是您仍然必须在 renderedTree
中找到呈现的 MyComponent
,然后才能检查针对它的断言。
我正在尝试为一些通过 React 组件呈现的 d3 元素编写测试,我希望能够挑选出页面上的一些 svg 元素并检查它们的宽度以查看它们是否'重新按预期运行。
我不完全确定 react test-utils 文档在说 ReactComponent 树时期望什么。
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>
...我正在尝试找到该元素。
据我了解,TestUtils.renderIntoDocument()
returns 一棵 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
的根。但是您仍然必须在 renderedTree
中找到呈现的 MyComponent
,然后才能检查针对它的断言。