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