React 32 - 测试工具(Test Utilities)
引用(Importing)
import ReactTestUtils from 'react-dom/test-utils'; // ES6
var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm
概述(Overview)
ReactTestUtils
makes it easy to test React components in the testing framework of your choice. At Facebook we use Jest for painless JavaScript testing. Learn how to get started with Jest through the Jest website’s React Tutorial.
ReactTestUtils
简化了测试框架中对React组件的测试,在Facebook使用Jest进行便捷的JavaScript测试。可以从Jest网站学习React测试教程。
提示(Note):
Airbnb has released a testing utility called Enzyme, which makes it easy to assert, manipulate, and traverse your React Components’ output. If you’re deciding on a unit testing utility to use together with Jest, or any other test runner, it’s worth checking out: http://airbnb.io/enzyme/
Airbnb发布了一套叫做Enzyme的测试工具,便于断言、操纵和遍历React组件。如果你打算选择一套测试工具配合Jest使用,或者其他测试框架,使用http://airbnb.io/enzyme/很有价值。
Simulate
renderIntoDocument()
mockComponent()
isElement()
isElementOfType()
isDOMComponent()
isCompositeComponent()
isCompositeComponentWithType()
findAllInRenderedTree()
scryRenderedDOMComponentsWithClass()
findRenderedDOMComponentWithClass()
scryRenderedDOMComponentsWithTag()
findRenderedDOMComponentWithTag()
scryRenderedComponentsWithType()
findRenderedComponentWithType()
参考(Reference)
Shallow Rendering
When writing unit tests for React, shallow rendering can be helpful. Shallow rendering lets you render a component “one level deep” and assert facts about what its render method returns, without worrying about the behavior of child components, which are not instantiated or rendered. This does not require a DOM.
浅渲染只会渲染“表层”组件,并可以对其返回结果进行断言,这对于编写React单元测试非常有帮助。浅渲染不关心相关子组件的行为,也不关心是否被实例化或者渲染,并且不依赖于DOM。
提醒(Note):
The shallow renderer has moved to
react-test-renderer/shallow
.
Learn more about shallow rendering on its reference page.浅渲染已经迁移到
react-test-renderer/shallow
中。
详细请查看浅渲染的参考页面。
其他工具(Other Utilities)
Simulate
Simulate.{eventName}(
element,
[eventData]
)
Simulate an event dispatch on a DOM node with optional eventData
event data.
在DOM节点上模拟一个事件派发,并传入可选的eventData
事件数据。
Simulate
has a method for every event that React understands.
Simulate
支持React理解的每一个事件。
点击一个元素(Clicking an element)
// <button ref="button">...</button>
const node = this.refs.button;
ReactTestUtils.Simulate.click(node);
更改一个表单值,随后按回车键(Changing the value of an input field and then pressing ENTER)。
// <input ref="input" />
const node = this.refs.input;
node.value = 'giraffe';
ReactTestUtils.Simulate.change(node);
ReactTestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13});
提醒(Note)
You will have to provide any event property that you’re using in your component (e.g. keyCode, which, etc…) as React is not creating any of these for you.
必须指定在组件中用到的所有事件属性(比如keyCode、which等等),React不会补充任何事件属性。
renderIntoDocument()
renderIntoDocument(element)
Render a React element into a detached DOM node in the document. This function requires a DOM.
将React元素渲染到文档的独立DOM节点中。该方法要求DOM。
提醒(Note):
You will need to have
window
,window.document
andwindow.document.createElement
globally available before you importReact
. Otherwise React will think it can’t access the DOM and methods likesetState
won’t work.在引用
React
之前,需要保证有window
,window.document
和window.document.createElement
全局变量。否则React会认为其不可访问DOM,setState
之类的方法也不能正常工作。
mockComponent()
mockComponent(
componentClass,
[mockTagName]
)
Pass a mocked component module to this method to augment it with useful methods that allow it to be used as a dummy React component. Instead of rendering as usual, the component will become a simple <div>
(or other tag if mockTagName
is provided) containing any provided children.
在此方法中传入一个模拟的组件模块,来创建一个用作“鸭形”的React组件。跟通常渲染不同,这个组件会变成一个简单的<div>
(或mockTagName
中指定的其他标签)并包含提供的任意子元素。
isElement()
isElement(element)
Returns true
if element
is any React element.
如果element
是任意React元素则返回true
。
isElementOfType()
isElementOfType(
element,
componentClass
)
Returns true
if element
is a React element whose type is of a React componentClass
.
如果element
是指定componentClass
类型的React元素则返回true
。
isDOMComponent()
isDOMComponent(instance)
Returns true
if instance
is a DOM component (such as a <div>
or <span>
).
如果instance
是一个DOM组件(比如<div>
或者<span>
),则返回true
。
isCompositeComponent()
isCompositeComponent(instance)
Returns true
if instance
is a user-defined component, such as a class or a function.
如果instance
是一个用户定义的组件,比如类或者函数,则返回true
。
isCompositeComponentWithType()
isCompositeComponentWithType(
instance,
componentClass
)
Returns true
if instance
is a component whose type is of a React componentClass
.
如果instance
是一个指定componentClass
类型的React组件,则返回true
。
findAllInRenderedTree()
findAllInRenderedTree(
tree,
test
)
Traverse all components in tree
and accumulate all components where test(component)
is true
. This is not that useful on its own, but it’s used as a primitive for other test utils.
遍历tree
中的所有组件,并记录test(component)
为true
的所有结果。直接使用该方法的意义不大,通常使用在其他测试工具中。
scryRenderedDOMComponentsWithClass()
scryRenderedDOMComponentsWithClass(
tree,
className
)
Finds all DOM elements of components in the rendered tree that are DOM components with the class name matching className
.
查找渲染树中的所有匹配className
类名的DOM元素。
findRenderedDOMComponentWithClass()
findRenderedDOMComponentWithClass(
tree,
className
)
Like scryRenderedDOMComponentsWithClass()
but expects there to be one result, and returns that one result, or throws exception if there is any other number of matches besides one.
跟scryRenderedDOMComponentsWithClass()
方法类似,但期望其只包含一个结果,并将其返回。如果结果数量不是1个,则抛出异常。
scryRenderedDOMComponentsWithTag()
scryRenderedDOMComponentsWithTag(
tree,
tagName
)
Finds all DOM elements of components in the rendered tree that are DOM components with the tag name matching tagName
.
查找渲染树中的所有匹配tagName
标签的DOM元素。
findRenderedDOMComponentWithTag()
findRenderedDOMComponentWithTag(
tree,
tagName
)
Like scryRenderedDOMComponentsWithTag()
but expects there to be one result, and returns that one result, or throws exception if there is any other number of matches besides one.
跟scryRenderedDOMComponentsWithTag()
方法类似,但期望其只包含一个结果,并将其返回。如果结果数量不是1个,则抛出异常。
scryRenderedComponentsWithType()
scryRenderedComponentsWithType(
tree,
componentClass
)
Finds all instances of components with type equal to componentClass
.
查找所有componentClass
类型的组件实例。
findRenderedComponentWithType()
findRenderedComponentWithType(
tree,
componentClass
)
Same as scryRenderedComponentsWithType()
but expects there to be one result and returns that one result, or throws exception if there is any other number of matches besides one.
跟scryRenderedComponentsWithType()
方法类似,但期望其只包含一个结果,并将其返回。如果结果数量不是1个,则抛出异常。