Инструменты тестирования

Импорт

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

Обзор

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

Примечание:

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

Для версий React ≤ 16 библиотека Enzyme упрощает утверждения, манипулирование и навигацию по выводу ваших компонентов React.

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

Справочник

act()

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

Примечание

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

Например, предположим, что у нас есть этот Counter компонент:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: 0};
    this.handleClick = this.handleClick.bind(this);
  }
  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
  }
  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }
  handleClick() {
    this.setState(state => ({
      count: state.count + 1,
    }));
  }
  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={this.handleClick}>
          Click me
        </button>
      </div>
    );
  }
}

Вот как мы можем его протестировать:

import React from 'react';
import ReactDOM from 'react-dom';
import { act } from 'react-dom/test-utils';
import Counter from './Counter';

let container;

beforeEach(() => {
  container = document.createElement('div');
  document.body.appendChild(container);
});

afterEach(() => {
  document.body.removeChild(container);
  container = null;
});

it('can render and update a counter', () => {
  // Test first render and componentDidMount
  act(() => {
    ReactDOM.render(<Counter />, container);
  });
  const button = container.querySelector('button');
  const label = container.querySelector('p');
  expect(label.textContent).toBe('You clicked 0 times');
  expect(document.title).toBe('You clicked 0 times');

  // Test second render and componentDidUpdate
  act(() => {
    button.dispatchEvent(new MouseEvent('click', {bubbles: true}));
  });
  expect(label.textContent).toBe('You clicked 1 times');
  expect(document.title).toBe('You clicked 1 times');
});

• Не забудьте, что отправка событий DOM работает только тогда, когда контейнер DOM добавлен в document. Вы можете использовать библиотеку, такую как React Testing Library, чтобы уменьшить объём кода.
• Документ recipes содержит подробности о том, как act() работает, с примерами и использованием.

mockComponent()

mockComponent(
  componentClass,
  [mockTagName]
)

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

Примечание:

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

isElement()

isElement(element)

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

isElementOfType()

isElementOfType(
  element,
  componentClass
)

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

isDOMComponent()

isDOMComponent(instance)

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

renderIntoDocument()

renderIntoDocument(element)

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

const domContainer = document.createElement('div');
ReactDOM.render(element, domContainer);

Примечание:

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

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

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 не создает их за вас.