4.7 Тестовые утилиты

Импорт:


Код
    
import ReactTestUtils from 'react-dom/test-utils'; // ES6
var ReactTestUtils = require('react-dom/test-utils'); // ES5 с npm


ReactTestUtils упрощает тестирование компонентов React в выбранном вами фреймворке тестирования. В Facebook используется Jest для безболезненного тестирования JavaScript. Узнайте, как начать работу с Jest на сайте .


Замечание.

Airbnb выпустила утилиту тестирования Enzyme, которая позволяет легко утверждать, манипулировать и перемещать выходные данные React-компонентов. Если вы решили, что применение модульного тестирования с использованием Jest или любого другого инструмента окажется полезным, вам стоит посмотреть: http://airbnb.io/enzyme/

  • Simulate
  • renderIntoDocument()
  • mockComponent()
  • isElement()
  • isElementOfType()
  • isDOMComponent()
  • isCompositeComponent()
  • isCompositeComponentWithType()
  • findAllInRenderedTree()
  • scryRenderedDOMComponentsWithClass()
  • findRenderedDOMComponentWithClass()
  • scryRenderedDOMComponentsWithTag()
  • findRenderedDOMComponentWithTag()
  • scryRenderedComponentsWithType()
  • findRenderedComponentWithType()



4.7.2.1 Поверхностный отрисовщик

При написании модульных тестов для React может оказаться полезным неглубокая отрисовка. Неглубокая отрисовка позволяет отрисовывать компонент «на один уровень глубины» и утверждать то, что возвращает его метод отрисовки, не беспокоясь о поведении дочерних компонентов, которые не создаются или не отображаются. Это не требует DOM.


Замечание.

Неглубокая отрисовка перемещена в react-test-renderer/shallow. Подробнее о поверхностной отрисовке читайте на странице справки .


4.7.2.2 Другие утилиты


Simulate


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

Имитирует отправку событий на узле DOM с дополнительными данными события eventData. У 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, which и т. Д.), поскольку React не создает для вас никакие из них.


renderIntoDocument()


Код
    
  renderIntoDocument(element)

Отрисовывает элемент React в отдельный узел DOM в документе. Для этой функции требуется DOM.


Замечание.

Вам нужно будет иметь window, window.document и window.document.createElement доступными глобально перед импортом React. В противном случае React будет думать, что он не может получить доступ к DOM, и методы, подобные setState, не будут работать.


mockComponent()


Код
    
  mockComponent(
    componentClass,
    [mockTagName]
  )

Передайте mock-компонент в этот метод, чтобы расширить его с помощью полезных методов, которые позволяют использовать его в качестве фиктивного компонента React. Вместо отрисовки, как обычно, компонент станет простым <div> (или другим тегом, если предоставляется mockTagName), содержащим все предоставленные потомки.


Замечание.

mockComponent() - устаревший API. Вместо этого рекомендуем использовать поверхностную отрисовку или jest.mock().


isElement()


Код
    
  isElement(element)

Возвращает true, если element является элементом React.


isElementOfType()


Код
    
  isElementOfType(
    element,
    componentClass
  )

Возвращает true, если element является элементом React, тип которого является componentClass.


isDOMComponent()


Код
    
  isDOMComponent(instance)

Возвращает true, если instance является компонентом DOM (например, <div> или <span>).


isCompositeComponent()


Код
    
  isCompositeComponent(instance)

Возвращает true, если instance является определённым пользователем компонентом, таким как класс или функция.


isCompositeComponentWithType()


Код
    
  isCompositeComponentWithType(
    instance,
    componentClass
  )

Возвращает true, если instance - это компонент, тип которого относится к 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(), но ожидает, что будет один результат, и вернет его или выдаст исключение, если количество совпадений больше одного.


scryRenderedDOMComponentsWithType()


Код
    
  scryRenderedDOMComponentsWithType(
    tree,
    componentClass
  )

Находит все экземпляры компонентов с типом, равным componentClass.


findRenderedDOMComponentWithType()


Код
    
  findRenderedDOMComponentWithType(
    tree,
    componentClass
  )

Подобно scryRenderedDOMComponentsWithType(), но ожидает, что будет один результат, и вернет его или выдаст исключение, если количество совпадений больше одного.