输入

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理解的每个事件都有一个方法。

点击一个元素

//  this.button = node}>...const node = this.button;ReactTestUtils.Simulate.click(node);

更改输入字段的值，然后按ENTER键。

//  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组件。不像往常那样渲染，该组件将变成包含任何提供的子项的简单