{"componentChunkName":"component---src-templates-docs-js","path":"/docs/test-utils.html","result":{"data":{"markdownRemark":{"html":"

Импортирование

\n
import ReactTestUtils from 'react-dom/test-utils'; // ES6\nvar ReactTestUtils = require('react-dom/test-utils'); // ES5 с npm
\n

Обзор

\n

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

\n
\n

Примечание:

\n

Мы рекомендуем использовать библиотеку React Testing Library, которая значительно облегчает написание тестов, имитируя поведение пользователей вашего приложения в браузере, и просто побуждает к хорошим практикам в тестировании.

\n

В качестве альтернативы, Airbnb выпустил утилиту тестирования Enzyme, которая легко позволяет делать проверки, управлять, а также просматривать выходные данные React-компонентов.

\n
\n\n

Справочник

\n

act()

\n

Чтобы подготовить компонент для тестирования, оберните код с рендерингом и выполнением обновлений внутри функции act(). Это сделает код теста для компонентов React более близким к тому, как он рендерится в браузере.

\n
\n

Примечание:

\n

Если вы используете пакет react-test-renderer, то он также предоставляет функцию act, которая работает аналогичным образом.

\n
\n

Допустим, у нас есть компонент Counter:

\n
class Counter extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {count: 0};\n    this.handleClick = this.handleClick.bind(this);\n  }\n  componentDidMount() {\n    document.title = `Вы нажали на кнопку ${this.state.count} раз`;\n  }\n  componentDidUpdate() {\n    document.title = `Вы нажали на кнопку ${this.state.count} раз`;\n  }\n  handleClick() {\n    this.setState(state => ({\n      count: state.count + 1,\n    }));\n  }\n  render() {\n    return (\n      <div>\n        <p>Вы нажали на кнопку {this.state.count} раз</p>\n        <button onClick={this.handleClick}>\n          Нажми на меня\n        </button>\n      </div>\n    );\n  }\n}
\n

Теперь напишем тест для этого примера:

\n
import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { act } from 'react-dom/test-utils';import Counter from './Counter';\n\nlet container;\n\nbeforeEach(() => {\n  container = document.createElement('div');\n  document.body.appendChild(container);\n});\n\nafterEach(() => {\n  document.body.removeChild(container);\n  container = null;\n});\n\nit('рендер и обновление счётчика', () => {\n  // Тестируем первый рендер и метод componentDidMount\n  act(() => {    ReactDOM.render(<Counter />, container);  });  const button = container.querySelector('button');\n  const label = container.querySelector('p');\n  expect(label.textContent).toBe('Вы нажали на кнопку 0 раз');\n  expect(document.title).toBe('Вы нажали на кнопку 0 раз');\n\n  // Тестируем второй рендер и метод componentDidUpdate\n  act(() => {    button.dispatchEvent(new MouseEvent('click', {bubbles: true}));  });  expect(label.textContent).toBe('Вы нажали на кнопку 1 раз');\n  expect(document.title).toBe('Вы нажали на кнопку 1 раз');\n});
\n\n
\n

mockComponent()

\n
mockComponent(\n  componentClass,\n  [mockTagName]\n)
\n

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

\n
\n

Примечание:

\n

API-метод mockComponent() объявлен устаревшим. Поэтому вместо него рекомендуется использовать jest.mock().

\n
\n
\n

isElement()

\n
isElement(element)
\n

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

\n
\n

isElementOfType()

\n
isElementOfType(\n  element,\n  componentClass\n)
\n

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

\n
\n

isDOMComponent()

\n
isDOMComponent(instance)
\n

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

\n
\n

isCompositeComponent()

\n
isCompositeComponent(instance)
\n

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

\n
\n

isCompositeComponentWithType()

\n
isCompositeComponentWithType(\n  instance,\n  componentClass\n)
\n

Возвращает true, если instance является компонентом, который имеет тип React componentClass.

\n
\n

findAllInRenderedTree()

\n
findAllInRenderedTree(\n  tree,\n  test\n)
\n

Находит все компоненты в дереве tree, для которых test(component) возвращает true. Сам по себе он не так полезен, но используется как примитив для других тестовых утилит.

\n
\n

scryRenderedDOMComponentsWithClass()

\n
scryRenderedDOMComponentsWithClass(\n  tree,\n  className\n)
\n

Находит все DOM-элементы компонентов в отображаемом дереве, которые являются DOM-компонентами с сопоставлением имён классов className.

\n
\n

findRenderedDOMComponentWithClass()

\n
findRenderedDOMComponentWithClass(\n  tree,\n  className\n)
\n

Работает как scryRenderedDOMComponentsWithClass(), но ожидает, что найдётся ровно один результат, который и будет возвращён. Если ничего не будет найдено или найдётся больше одного результата, генерирует исключение.

\n
\n

scryRenderedDOMComponentsWithTag()

\n
scryRenderedDOMComponentsWithTag(\n  tree,\n  tagName\n)
\n

Ищет все DOM-элементы компонентов в отображённом дереве, которые являются DOM-компонентами, и имя которых соответствует tagName.

\n
\n

findRenderedDOMComponentWithTag()

\n
findRenderedDOMComponentWithTag(\n  tree,\n  tagName\n)
\n

Также как scryRenderedDOMComponentsWithTag() но ожидает, что найдётся ровно один результат, который и будет возвращён. Если ничего не будет найдено или найдётся больше одного результата, генерирует исключение.

\n
\n

scryRenderedComponentsWithType()

\n
scryRenderedComponentsWithType(\n  tree,\n  componentClass\n)
\n

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

\n
\n

findRenderedComponentWithType()

\n
findRenderedComponentWithType(\n  tree,\n  componentClass\n)
\n

Работает так же как scryRenderedComponentsWithType(), но ожидает, что найдётся ровно один результат, который и будет возвращён. Если ничего не будет найдено или найдётся больше одного результата, генерирует исключение.

\n
\n

renderIntoDocument()

\n
renderIntoDocument(element)
\n

Отображает React элемент в отдельно взятом DOM-узле документа. Этой функции нужен DOM. Это фактически эквивалентно:

\n
const domContainer = document.createElement('div');\nReactDOM.render(element, domContainer);
\n
\n

Примечание:

\n

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

\n
\n
\n

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

\n

Simulate

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

Симулировать отправку события сработавшего на DOM-узле с дополнительным объектом eventData.

\n

Simulate имеет метод для каждого события, которое React может понимать.

\n

Кликнуть на элемент

\n
// <button ref={(node) => this.button = node}>...</button>\nconst node = this.button;\nReactTestUtils.Simulate.click(node);
\n

Изменить значение в поле ввода, а затем эмулировать нажатие кнопки ENTER.

\n
// <input ref={(node) => this.textInput = node} />\nconst node = this.textInput;\nnode.value = 'жираф';\nReactTestUtils.Simulate.change(node);\nReactTestUtils.Simulate.keyDown(node, {key: \"Enter\", keyCode: 13, which: 13});
\n
\n

Примечание:

\n

Вам нужно будет предоставить все свойства события, которое вы используете в своём компоненте (например, keyCode, which и т. д.), поскольку React не создаёт ничего из этого.

\n
\n
","frontmatter":{"title":"Утилиты для тестирования","next":null,"prev":null},"fields":{"path":"content/docs/addons-test-utils.md","slug":"docs/test-utils.html"}}},"pageContext":{"slug":"docs/test-utils.html"}},"staticQueryHashes":[]}