{"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 на сайті Jest React Tutorial.

\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  // Тестуємо перший render та 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  // Тестуємо другий render та 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

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

\n
\n

Примітка:

\n

mockComponent() — застарілий API. Ми рекомендуємо використовувати 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 = 'giraffe';\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":[]}