Unetway

ReactJS - Утилиты тестирования

ReactTestUtils позволяет легко протестировать компоненты React в рамках тестирования по вашему выбору. В Facebook используют Jest для безболезненного тестирования JavaScript. 

Importing

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

Заметка:

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

Кроме того, есть еще одна утилита для тестирования, называемая реакционно-тестовой библиотекой, предназначенная для включения и поощрения написания тестов, в которых используются ваши компоненты, поскольку конечные пользователи используют их. Он также работает с любым тестовым бегуном: https://git.io/react-testing-library Узнайте, как начать работу с Jest через React Tutorial от Jest .

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

Reference

Shallow Rendering

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

Заметка:

Мелкий визуализатор переместился react-test-renderer/shallow.

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

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, который и т. Д.), Поскольку React не создает ни одного из них для вас.

renderIntoDocument()

renderIntoDocument(element)

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

Заметка:

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

mockComponent()

mockComponent(
  componentClass,
  [mockTagName]
)

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

Заметка:

mockComponent() является устаревшим API. Мы рекомендуем использовать Shallow Renderer или jest.mock() вместо этого.

isElement()

isElement(element)

Возвращает, true если element есть какой-либо элемент React.

isElementOfType()

isElementOfType(
  element,
  componentClass
)

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