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 节点上模拟事件分发。

SimulateReact 的每个事件 都有一个方法。

点击一个元素

// <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.documentwindow.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() 相同,但期望得到一个结果并返回该结果,或者如果除了一个之外还有其他数目的匹配,则抛出异常。


在 Github 上共同编辑:

Github 系列文章: