React
v16.4.1GitHub

实用测试工具(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/

或者，还有另一个名为 react-testing-library 的测试实用程序，在最终用户使用您的组件时，启用和鼓励编写测试。它也适用于任何测试运行：https://git.io/react-testing-library

参考

浅层渲染

在为 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);

Changing the value of an input field and then pressing 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，which, 等等），因为 React 不会为您创建任何这些属性。

renderIntoDocument()

renderIntoDocument(element)

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

注意：

在导入 React 之前，你需要全局使用 window，window.document 和window.document.createElement 。否则 React 会认为它无法访问 DOM ，而且像 setState 这样的方法将无效。

mockComponent()

mockComponent(
  componentClass,
  [mockTagName]
)

将一个 模拟(mock) 的组件模块传递给这个方法，以有用的方法扩展它，允许它作为一个虚拟的 React 组件。该组件将不再像平常一样渲染，而是成为一个简单的 <div> (或其他标签，如果提供mockTagName )，其包含任何提供的子元素。

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

注意：

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

isElement()

isElement(element)

如果element 是一个React 元素 ，则返回 true 。

isElementOfType()

isElementOfType(
  element,
  componentClass
)

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

isDOMComponent()

isDOMComponent(instance)

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

isCompositeComponent()

isCompositeComponent(instance)

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

isCompositeComponentWithType()

isCompositeComponentWithType(
  instance,
  componentClass
)

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

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() 一样，但是期望有一个结果，并返回该结果，如果除了一个之外还有其他数量的匹配，则抛出异常。

Edit this page