React插件-测试工具集-克隆组件

测试工具集

React.addons.TestUtils使得在你选择的测试框架中测试React组件变得简单（我们使用Jest）。

模拟

Simulate.{eventName}(DOMElementelement, object eventData)

模拟事件在DOM节点上派发，附带可选的eventData事件数据。这可能是在ReactTestUtils中最有用的工具。

使用示例：

var node= this.refs.input.getDOMNode();
React.addons.TestUtils.Simulate.click(node);
React.addons.TestUtils.Simulate.change(node, {target: {value:'Hello, world'}});
React.addons.TestUtils.Simulate.keyDown(node, {key:"Enter"});

Simulate有一个方法适用于每个事件，这些事件都是React能识别的。

renderIntoDocument

ReactComponentrenderIntoDocument(ReactComponent instance)

把一个组件渲染成一个在文档中分离的DOM节点。这个函数需要DOM。

mockComponent

object mockComponent(function componentClass, string? mockTagName)

传递一个虚拟的组件模块给这个方法，给这个组件扩充一些有用的方法，让组件能够被当成一个React组件的仿制品来使用。这个组件将会变成一个简单的<div>（或者是其它标签，如果mockTagName提供了的话），包含任何提供的子节点，而不是像往常一样渲染出来。

isElementOfType

booleanisElementOfType(ReactElement element,function componentClass)

如果element是一个类型为React componentClass的React元素，则返回true。

isDOMComponent

booleanisDOMComponent(ReactComponent instance)

如果instance是一个DOM组件（例如<div>或者<span>），则返回true。

isCompositeComponent

booleanisCompositeComponent(ReactComponent instance)`

如果instance是一个合成的组件（通过React.createClass()创建），则返回true。

isCompositeComponentWithType

booleanisCompositeComponentWithType(ReactComponent instance,functioncomponentClass)

如果instance是一个合成的组件（通过React.createClass()创建），此组件的类型是React componentClass，则返回true。

findAllInRenderedTree

array findAllInRenderedTree(ReactComponent tree,function test)

遍历tree中所有组件，搜集test(component)返回true的所有组件。就这个本身来说不是很有用，但是它可以为其它测试提供原始数据。

scryRenderedDOMComponentsWithClass

arrayscryRenderedDOMComponentsWithClass(ReactComponent tree, string className)

查找组件的所有实例，这些实例都在渲染后的树中，并且是带有className类名的DOM组件。

findRenderedDOMComponentWithClass

ReactComponentfindRenderedDOMComponentWithClass(ReactComponent tree, string className)

类似于scryRenderedDOMComponentsWithClass()，但是它只返回一个结果，如果有其它满足条件的，则会抛出异常。

scryRenderedDOMComponentsWithTag

arrayscryRenderedDOMComponentsWithTag(ReactComponent tree, string tagName)

在渲染后的树中找出所有组件实例，并且是标签名字符合tagName的DOM组件。

findRenderedDOMComponentWithTag

ReactComponentfindRenderedDOMComponentWithTag(ReactComponent tree, string tagName)

类似于scryRenderedDOMComponentsWithTag()，但是它只返回一个结果，如果有其它满足条件的，则会抛出异常。

scryRenderedComponentsWithType

array scryRenderedComponentsWithType(ReactComponent tree,functioncomponentClass)

找出所有组件实例，这些组件的类型为componentClass。

findRenderedComponentWithType

ReactComponent findRenderedComponentWithType(ReactComponent tree,functioncomponentClass)

类似于scryRenderedComponentsWithType()，但是它只返回一个结果，如果有其它满足条件的，则会抛出异常。

克隆组件

在极少数应用场景中，一个组件可能想改变另一个它不拥有的组件的props（就像改变一个组件的className，这个组件又作为this.props.children传入）。其它的时候，可能想生成传进来的一个组件的多个拷贝。cloneWithProps()使其成为可能。

ReactComponentReact.addons.cloneWithProps(ReactComponent component, object? extraProps)

做一个component的浅复制，合并extraProps提供的每一个props。className和styleprops将会被智能合并。

注意：

cloneWithProps并不传递key到克隆的组件中。如果你希望保留key，将其添加到extraProps对象： jsvar clonedComponent = cloneWithProps(originalComponent, { key :originalComponent.key }); ref也一样不会保留。