watak

输入

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

Artikel sebelumnya: Artikel seterusnya: