輸入

import ReactTestUtils from 'react-dom/test-utils'; // ES6
var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm

概觀

ReactTestUtils使您可以輕松地在您選擇的測試框架中測試React組件。在Facebook我們使用Jest進行無痛JavaScript測試。通過Jest網(wǎng)站的React Tutorial了解如何開始使用Jest 。

注意：Airbnb已經(jīng)發(fā)布了一個名為Enzyme的測試工具，它可以很容易地斷言，操縱和遍歷React Components的輸出。如果您決定使用單元測試實用程序與Jest或任何其他測試運行器一起使用，則值得檢查：http : //airbnb.io/enzyme/

• Simulate

• renderIntoDocument()

• mockComponent()

• isElement()

• isElementOfType()

• isDOMComponent()

• isCompositeComponent()

• isCompositeComponentWithType()

• findAllInRenderedTree()

• scryRenderedDOMComponentsWithClass()

• findRenderedDOMComponentWithClass()

• scryRenderedDOMComponentsWithTag()

• findRenderedDOMComponentWithTag()

• scryRenderedComponentsWithType()

• findRenderedComponentWithType()

參考

淺的渲染

在為React編寫單元測試時，淺層渲染可能會有所幫助。淺層渲染使您可以渲染“一層深度”的組件，并確定其渲染方法返回的事實，而不必擔(dān)心未實例化或渲染的子組件的行為。這不需要DOM。

注意：淺呈現(xiàn)器已移至react-test-renderer/shallow。在參考頁面上了解更多關(guān)于淺層渲染的信息。

其他實用程序

Simulate

Simulate.{eventName}(
  element,  [eventData])

使用可選eventData事件數(shù)據(jù)模擬DOM節(jié)點上的事件分派。

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不會為您創(chuàng)建任何這些屬性。

renderIntoDocument()

renderIntoDocument(element)

將React元素渲染到文檔中的分離DOM節(jié)點中。這個功能需要一個DOM。

注意：在導(dǎo)入之前window，您將需要擁有window.document并window.document.createElement全局可用。否則React會認為它不能訪問DOM，而像這樣的方法將無法工作。  ReactsetState

mockComponent()

mockComponent(
  componentClass,  [mockTagName])

將模擬的組件模塊傳遞給此方法，以便使用有用的方法來擴充它，以便將其用作虛擬React組件。不像往常那樣渲染，該組件將變成包含任何提供的子項的簡單<div>（或提供其他標簽mockTagName）。

注意：   mockComponent()是一個傳統(tǒng)的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是用戶定義的組件，例如類或函數(shù)。

isCompositeComponentWithType()

isCompositeComponentWithType(
  instance,
  componentClass)

true如果instance是類型為React的組件，則返回componentClass。

findAllInRenderedTree()

findAllInRenderedTree(
  tree,
  test)

遍歷所有組件tree和積累的所有組件，其中test(component)的true。這本身并不是很有用，但它被用作其他測試應(yīng)用程序的原語。

scryRenderedDOMComponentsWithClass()

scryRenderedDOMComponentsWithClass(
  tree,
  className)

在呈現(xiàn)的樹中查找與類名匹配的DOM組件的所有DOM元素className。

findRenderedDOMComponentWithClass()

findRenderedDOMComponentWithClass(
  tree,
  className)

喜歡scryRenderedDOMComponentsWithClass()但預(yù)計會有一個結(jié)果，并返回該結(jié)果，或者如果除了一個之外還有其他任何匹配項，則會拋出異常。

scryRenderedDOMComponentsWithTag()

scryRenderedDOMComponentsWithTag(
  tree,
  tagName)

查找渲染樹中組件的所有DOM元素，這些組件是標記名稱匹配的DOM組件tagName。

findRenderedDOMComponentWithTag()

findRenderedDOMComponentWithTag(
  tree,
  tagName)

喜歡scryRenderedDOMComponentsWithTag()但預(yù)計會有一個結(jié)果，并返回該結(jié)果，或者如果除了一個之外還有其他任何匹配項，則會拋出異常。

scryRenderedComponentsWithType()

scryRenderedComponentsWithType(
  tree,
  componentClass)

查找類型等于的組件的所有實例componentClass。

findRenderedComponentWithType()

findRenderedComponentWithType(
  tree,
  componentClass)

相同scryRenderedComponentsWithType()但期望得到一個結(jié)果并返回那一個結(jié)果，或者如果除了一個之外還有其他任何匹配，則拋出異常。