輸入

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

概觀

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

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

• Simulate

• renderIntoDocument()

• mockComponent()

• isElement()

• isElementOfType()

• isDOMComponent()

• isCompositeComponent()

• isCompositeComponentWithType()

• findAllInRenderedTree()

• scryRenderedDOMComponentsWithClass()

• findRenderedDOMComponentWithClass()

• scryRenderedDOMComponentsWithTag()

• findRenderedDOMComponentWithTag()

• scryRenderedComponentsWithType()

• findRenderedComponentWithType()

參考

淺的渲染

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

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

其他實(shí)用程序

Simulate

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

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

Simulate 對(duì)于React理解的每個(gè)事件都有一個(gè)方法。

點(diǎn)擊一個(gè)元素

// <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，等等），因?yàn)镽eact不會(huì)為您創(chuàng)建任何這些屬性。

renderIntoDocument()

renderIntoDocument(element)

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

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

mockComponent()

mockComponent(
  componentClass,  [mockTagName])

將模擬的組件模塊傳遞給此方法，以便使用有用的方法來(lái)擴(kuò)充它，以便將其用作虛擬React組件。不像往常那樣渲染，該組件將變成包含任何提供的子項(xiàng)的簡(jiǎn)單<div>（或提供其他標(biāo)簽mockTagName）。

注意：   mockComponent()是一個(gè)傳統(tǒng)的API。我們建議使用淺色渲染或jest.mock()替代。

isElement()

isElement(element)

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

isElementOfType()

isElementOfType(
  element,
  componentClass)

返回trueif element是React元素的類(lèi)型是React componentClass。

isDOMComponent()

isDOMComponent(instance)

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

isCompositeComponent()

isCompositeComponent(instance)

返回true是否instance是用戶(hù)定義的組件，例如類(lèi)或函數(shù)。

isCompositeComponentWithType()

isCompositeComponentWithType(
  instance,
  componentClass)

true如果instance是類(lèi)型為React的組件，則返回componentClass。

findAllInRenderedTree()

findAllInRenderedTree(
  tree,
  test)

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

scryRenderedDOMComponentsWithClass()

scryRenderedDOMComponentsWithClass(
  tree,
  className)

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

findRenderedDOMComponentWithClass()

findRenderedDOMComponentWithClass(
  tree,
  className)

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

scryRenderedDOMComponentsWithTag()

scryRenderedDOMComponentsWithTag(
  tree,
  tagName)

查找渲染樹(shù)中組件的所有DOM元素，這些組件是標(biāo)記名稱(chēng)匹配的DOM組件tagName。

findRenderedDOMComponentWithTag()

findRenderedDOMComponentWithTag(
  tree,
  tagName)

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

scryRenderedComponentsWithType()

scryRenderedComponentsWithType(
  tree,
  componentClass)

查找類(lèi)型等于的組件的所有實(shí)例componentClass。

findRenderedComponentWithType()

findRenderedComponentWithType(
  tree,
  componentClass)

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