此文章是翻译Test Utilities这篇React（版本v16.2.0）官方文档。

Test Utilities

Importing

  1. import ReactTestUtils from 'react-dom/test-utils'; // ES6
  2. const ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm

概览

ReactTestUtils 在你所选择的测试框架便于测试React 组件。在Facebook，我们使用Jest 来无痛的JavaScript测试。学习如何开始Jest，通过Jest 的网站React 教程。

注意： Airbnb 已经发布了一个测试工具称为Enzyme，它很容易维护，操作，和遍历你的React 组件的输出。如果你决定在一个单元测试工具使用一起Jest，或任何其他的测试运行，可以查看这里：http://airbnb.io/enzyme/

  • Simulate
  • renderIntoDocument()
  • mockComponent()
  • isElement()
  • isElementOfType()
  • isDOMComponent()
  • isCompositeComponent()
  • isCompositeComponentWithType()
  • findAllInRenderedTree()
  • scryRendererDOMComponentsWithClass()
  • findRendererDOMComponentWithClass()
  • scryRendererDOMComponentsWithTag()
  • findRendererDOMComponentWithTag()
  • scryRendererComponentsWithTag()
  • findRendererComponentWithTag()

参考

浅渲染（Shallow Rendering）

当编写React 的单元测试时，浅渲染可能很有帮助。通过浅渲染，可以渲染组件“一个深度”，并断言关于其渲染方法返回的内容的事实，而不必担心未实例化或渲染的子组件的行为。这不需要DOM。

注意： 浅渲染已经移动到react-test-renderer/shallow。在浅渲染的参考页了解更多

其他工具

Simulate

  1. Simulate.{eventName}(
  2.   element,
  3.   [eventData]
  4. )

模拟DOM 节点上的事件分发，使用可选的eventData 事件数据。

Simulate 对每一个React 能理解的事件 都有一个方法。

点击一个元素

  1. // <button ref={(node) => this.button = node}>...</button>
  2. const node = this.button;
  3. ReactTestUtils.Simulate.click(node)

改变输入表单域的值，然后按回车

  1. // <input ref={(node) => this.textInput = node}/>
  2. const node = this.textInput;
  3. node.value = 'giraffe';
  4. ReactTestUtils.Simulate.change(node);
  5. ReactTestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13});

注意： 你必须提供你在React 组件中使用的任何事件属性（例如，keyCode、which 等），因为反React 不会为你创建任何事件属性。

renderIntoDocument()

  1. renderIntoDocument(element)

渲染一个React 元素到文档中一个派遣的DOM 节点中。这个方法需要一个DOM。

注意： 在导入React 之前, 你需要window，window.document 和window.document.createElement 全局有效。否则，Reacti 会认为它无法访问DOM，而setState 之类的方法将无法工作。

mockComponent()

  1. mockComponent(
  2.   componentClass,
  3.   [mockTagName]
  4. )

传入一个模拟的组件模块给这个方法来增强它，使用有用的方法去允许它作为一个dummy React 组件。不像通常的渲染，组件将成为一个简单的<div>（或其他mockTagName 标签）包含任何已提供的子节点。

注意： mockComponent() 是一个遗留API。我们推荐使用浅渲染 或jest.mock()

isElement()

  1. isElement(element)

如果element 是任意React 元素，返回true。

isElementOfType()

  1. isElementOfType(
  2.   element，
  3.   componentClass
  4. )

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

isDOMComponent()

  1. isDOMComponent(instance)

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

isCompositeComponent()

  1. isCompositeComponent(instance)

如果instance 是用户自定义组件，例如class 或function，返回true。

isCompositeComponentWithType()

  1. isCompositeComponentWithType(
  2.   instance，
  3.   componentClass
  4. )

如果instance 是一个componentClass React 组件，返回true。

findAllInRenderedTree()

  1. findAllInRenderedTree(
  2.   tree,
  3.   test
  4. )

遍历tree 中的所有组件并累积所有组件，其test(component) 是true。这对自己没有用，但它作为一种原始的其他测试工具是有用的。

scryRendererDOMComponentsWithClass()

  1. scryRendererDOMComponentsWithClass(
  2.   tree,
  3.   className
  4. )

在渲染树中查找所有DOM 组件的类名为className 的DOM元素组件。

findRendererDOMComponentWithClass()

  1. findRendererDOMComponentWithClass(
  2.   tree,
  3.   className
  4. )

同scryRendererDOMComponentsWithClass 类似，但是期望只有一个结果，并返回这个结果，如果不是有且仅有一个，则抛出异常。

scryRendererComponentsWithTag()

  1. scryRendererComponentsWithTag(
  2.     tree,
  3.     tagName
  4. )

在渲染树中查找所有DOM 组件的标签名为tagName 的DOM元素组件。

scryRendererComponentWithTag()

  1. scryRendererComponentWithTag(
  2.   tree,
  3.   className
  4. )

同scryRendererComponentsWithTag 类似，但是期望只有一个结果，并返回这个结果，如果不是有且仅有一个，则抛出异常。

scryRendererComponentsWithType()

  1. scryRendererComponentsWithType(
  2.     tree,
  3.     componentClass
  4. )

查找所有的类型为componentClass 的组件实例。

scryRendererComponentWithType()

  1. scryRendererComponentWithType(
  2.   tree,
  3.   className
  4. )

同scryRendererComponentWithType 类似，但是期望只有一个结果，并返回这个结果，如果不是有且仅有一个，则抛出异常。