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 Components的输出。如果您决定使用单元测试实用程序与Jest或任何其他测试运行器一起使用，则值得检查：http : //airbnb.io/enzyme/

  • Simulate

  • renderIntoDocument()

  • mockComponent()

  • isElement()

  • isElementOfType()

  • isDOMComponent()

  • isCompositeComponent()

  • isCompositeComponentWithType()

  • findAllInRenderedTree()

  • scryRenderedDOMComponentsWithClass()

  • findRenderedDOMComponentWithClass()

  • scryRenderedDOMComponentsWithTag()

  • findRenderedDOMComponentWithTag()

  • scryRenderedComponentsWithType()

  • findRenderedComponentWithType()

参考

浅的渲染

在为React编写单元测试时，浅层渲染可能会有所帮助。浅层渲染使您可以渲染“一层深度”的组件，并确定其渲染方法返回的事实，而不必担心未实例化或渲染的子组件的行为。这不需要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(element)

将React元素渲染到文档中的分离DOM节点中。这个功能需要一个DOM。

注意：在导入之前window，您将需要拥有window.document并window.document.createElement全局可用。否则React会认为它不能访问DOM，而像这样的方法将无法工作。 ReactsetState

mockComponent()

mockComponent(
  componentClass,
  [mockTagName]
)

将模拟的组件模块传递给此方法，以便使用有用的方法来扩充它，以便将其用作虚拟React组件。不像往常那样渲染，该组件将变成包含任何提供的子项的简单<div>（或提供其他标签mockTagName）。

注意： mockComponent()是一个传统的API。我们建议使用浅色渲染或jest.mock()替代。

isElement()

isElement(element)

返回true是否element有任何React元素。

isElementOfType()

isElementOfType(
  element,
  componentClass
)

返回trueif element是React元素的类型是React componentClass。

isDOMComponent()

isDOMComponent(instance)

返回true是否instance是DOM组件（如a <div>或<span>）。

isCompositeComponent()

isCompositeComponent(instance)

返回true是否instance是用户定义的组件，例如类或函数。

isCompositeComponentWithType()

isCompositeComponentWithType(
  instance,
  componentClass
)

true如果instance是类型为React的组件，则返回componentClass。

findAllInRenderedTree()

findAllInRenderedTree(
  tree,
  test
)

遍历所有组件tree和积累的所有组件，其中test(component)的true。这本身并不是很有用，但它被用作其他测试应用程序的原语。

scryRenderedDOMComponentsWithClass()

scryRenderedDOMComponentsWithClass(
  tree,
  className
)

在呈现的树中查找与类名匹配的DOM组件的所有DOM元素className。

findRenderedDOMComponentWithClass()

findRenderedDOMComponentWithClass(
  tree,
  className
)

喜欢scryRenderedDOMComponentsWithClass()但预计会有一个结果，并返回该结果，或者如果除了一个之外还有其他任何匹配项，则会抛出异常。

scryRenderedDOMComponentsWithTag()

scryRenderedDOMComponentsWithTag(
  tree,
  tagName
)

查找渲染树中组件的所有DOM元素，这些组件是标记名称匹配的DOM组件tagName。

findRenderedDOMComponentWithTag()

findRenderedDOMComponentWithTag(
  tree,
  tagName
)

喜欢scryRenderedDOMComponentsWithTag()但预计会有一个结果，并返回该结果，或者如果除了一个之外还有其他任何匹配项，则会抛出异常。

scryRenderedComponentsWithType()

scryRenderedComponentsWithType(
  tree,
  componentClass
)

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

findRenderedComponentWithType()

findRenderedComponentWithType(
  tree,
  componentClass
)

相同scryRenderedComponentsWithType()但期望得到一个结果并返回那一个结果，或者如果除了一个之外还有其他任何匹配，则抛出异常。