- Test Utilities
- 概览
- API 文档参考
- Shallow rendering
- 其他实用程序程序
- Simulate
- renderIntoDocument()
- mockComponent()
- isElement()
- isElementOfType()
- isDOMComponent()
- isCompositeComponent()
- isCompositeComponentWithType()
- findAllInRenderedTree()
- scryRenderedDOMComponentsWithClass()
- findRenderedDOMComponentWithClass()
- scryRenderedDOMComponentsWithTag()
- findRenderedDOMComponentWithTag()
- scryRenderedComponentsWithType()
- findRenderedComponentWithType()
Test Utilities
引入:
import ReactTestUtils from 'react-dom/test-utils'; // ES6
var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm
概览
ReactTestUtils
使你可以轻松地在你选择的测试框架中测试 React 组件。在 Facebook 我们使用 Jest 进行无痛的 JavaScript 测试。通过 Jest 网站的 React Tutorial 了解如何开始使用 Jest。
注意: Airbnb 已经发布了一个名为 Enzyme 的测试实用程序,它可以很容易地断言,操作和遍历 React Compoennts 的输出。如果你决定使用单元测试实用程序与 Jest 或 任何其他测试运行器一起使用,则值得检查:http://airbnb.io/enzyme/
API 文档参考
Shallow rendering
在为 React 编写单元测试的时候,浅渲染可能会比较有帮助。浅渲染使你可以渲染“一级深度”的组件,并能够确定 render 方法返回的内容,而不用担心未实例化或渲染的子组件的行为。这不需要请求 DOM。
注意: 浅渲染已经移动到了
react-test-renderer/shallow
. 在参考页面上了解更多关于浅层渲染的内容。
其他实用程序程序
Simulate
Simulate.{eventName}(
element,
[eventData]
)
使用可选的 eventData
事件数据在 DOM 节点上模拟事件分发。
Simulate
对 React 的每个事件 都有一个方法。
点击一个元素
// <button ref={(node) => this.button = node}>...</button>
const node = this.button;
ReactTestUtils.Simulate.click(node);
更改输入字段的值,然后按下 ENTER 键
// <input ref={(node) => this.textInput = node} />
const node = this.textInput;
node.value = 'giraffe';
ReactTestUtils.Simulate.change(node);
ReactTestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13});
注意: 你必须提供你在组件中使用的任何事件属性(例如,keyCode,等等),因为 React 不会为你创建任何这些属性。
renderIntoDocument()
renderIntoDocument()
将 React 元素渲染到文档中分离的 DOM 节点中。这个功能需要一个 DOM。
注意: 在导入 React 之前,你需要全局可用的
window
,window.document
和window.document.createElement
。否则 React 会认为它不能访问 DOM,像setState
这样的方法将无法工作。
mockComponent()
mockComponent(
componentClass,
[mockTagName]
)
将模拟的组件模块传递给此方法,以便使用有用的方法来扩充它,以便将其用作虚拟 React 组件。不像往常那样渲染,组件将变成一个简单的 <div>
(或如果提供了 mockTagName 的话就是其他标签),它包含任何提供的子项。
注意:
mockComponent()
是一个传统的 API。相反我们建议使用浅渲染或 jest.mock()
isElement()
isElement(element)
如果 element
是任何的 React 元素,则返回 true
。
isElementOfType()
isElementOfType(
element,
componentClass
)
如果 element
是类型是 React 的 componentClass
(组件类),则返回 true
。
isDOMComponent()
isDOMComponent(instance)
如果 instance
是一个 DOM 组件(如 <div>
或 <span>
),则返回 true
。
isCompositeComponent()
isCompositeComponent(instance)
如果 instance
是用户自定义的组件(如 class 或 function),则返回 true
。
isCompositeComponentWithType()
isCompositeComponentWithType(
instance,
componentClass
)
如果 instance
是 React 的 componentClass
类型,则返回 true
。
findAllInRenderedTree()
findAllInRenderedTree(
tree,
test
)
遍历 tree
中的所有组件并且满足 test(component)
返回 true
。这本身并没有什么用处,但它被用作其他测试应用的基础。
scryRenderedDOMComponentsWithClass()
scryRenderedDOMComponentsWithClass(
tree,
className
)
查找渲染树中所有的 DOM 元素,这些 DOM 元素是类名匹配 className
的 DOM 组件。
findRenderedDOMComponentWithClass()
findRenderedDOMComponentWithClass(
tree,
className
)
像 scryRenderedDOMComponentsWithClass() 相似,但期望得到一个结果并返回那个结果,或者如果除了一个之外还有其他数目的匹配,则抛出异常。
scryRenderedDOMComponentsWithTag()
scryRenderedDOMComponentsWithTag(
tree,
tagName
)
在渲染的树中查找所有的 DOM 元素,这些 DOM 元素是 tag 名称匹配 tagName
的 DOM 组件。
findRenderedDOMComponentWithTag()
findRenderedDOMComponentWithTag(
tree,
tagName
)
像 scryRenderedDOMComponentsWithTag() 一样,但期望得到一个结果并返回这个结果,或者如果除了一个之外还有其他数目的匹配,则抛出异常。
scryRenderedComponentsWithType()
scryRenderedComponentsWithType(
tree,
componentClass
)
查找 instances
的组件类型与 componentClass
相同。
findRenderedComponentWithType()
findRenderedComponentWithType(
tree,
componentClass
)
和 scryRenderedComponentsWithType() 相同,但期望得到一个结果并返回该结果,或者如果除了一个之外还有其他数目的匹配,则抛出异常。