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

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

\n
import TestRenderer from 'react-test-renderer'; // ES6\nconst TestRenderer = require('react-test-renderer'); // ES5 с помощью npm
\n

Обзор

\n

В этом пакете вы найдёте рендерер, который умеет рендерить React-компоненты в обычные JavaScript-объекты, не используя при этом DOM или мобильное окружение.

\n

Пакет react-test-renderer облегчает получение снимка иерархии представления платформы (чем-то похожего на DOM-дерево), отрендеренного компонентом React DOM или React Native. При этом не используются ни браузер, ни jsdom.

\n

Пример:

\n
import TestRenderer from 'react-test-renderer';\n\nfunction Link(props) {\n  return <a href={props.page}>{props.children}</a>;\n}\n\nconst testRenderer = TestRenderer.create(\n  <Link page=\"https://www.facebook.com/\">Facebook</Link>\n);\n\nconsole.log(testRenderer.toJSON());\n// { type: 'a',\n//   props: { href: 'https://www.facebook.com/' },\n//   children: [ 'Facebook' ] }
\n

Jest может автоматически сохранять в файл снимок копии дерева в виде JSON, а затем проверять в тестах, что в этом снимке ничего не изменилось с момента прошлого исполнения теста: узнать подробнее.

\n

Также есть возможность искать в дереве конкретные узлы и проверять утверждения относительно них:

\n
import TestRenderer from 'react-test-renderer';\n\nfunction MyComponent() {\n  return (\n    <div>\n      <SubComponent foo=\"bar\" />\n      <p className=\"my\">Hello</p>\n    </div>\n  )\n}\n\nfunction SubComponent() {\n  return (\n    <p className=\"sub\">Sub</p>\n  );\n}\n\nconst testRenderer = TestRenderer.create(<MyComponent />);\nconst testInstance = testRenderer.root;\n\nexpect(testInstance.findByType(SubComponent).props.foo).toBe('bar');\nexpect(testInstance.findByProps({className: \"sub\"}).children).toEqual(['Sub']);
\n

TestRenderer

\n\n

Методы и поля экземпляра TestRenderer

\n\n

TestInstance

\n\n

Справочник

\n

TestRenderer.create()

\n
TestRenderer.create(element, options);
\n

Создаёт экземпляр TestRenderer для переданного React-элемента. И хотя реальный DOM не будет использоваться, дерево компонентов будет полностью отрендерено в памяти и его можно будет протестировать с помощью утверждений. Возвращает экземпляр TestRenderer

\n

TestRenderer.act()

\n
TestRenderer.act(callback);
\n

Подобно вспомогательному методу act() из react-dom/test-utils, TestRenderer.act подготавливает компонент для проверки утверждений. Используйте эту версию act() для оборачивания TestRenderer.create и testRenderer.update.

\n
import {create, act} from 'react-test-renderer';\nimport App from './app.js'; // Тестируемый компонент\n\n// рендер компонента\nlet root; \nact(() => {\n  root = create(<App value={1}/>)\n});\n\n// проверка утверждений\nexpect(root.toJSON()).toMatchSnapshot();\n\n// обновление с некоторыми отличающимися пропсами\nact(() => {\n  root.update(<App value={2}/>);\n})\n\n// проверка утверждений\nexpect(root.toJSON()).toMatchSnapshot();
\n

testRenderer.toJSON()

\n
testRenderer.toJSON()
\n

Возвращает объект, представляющий собой отрендеренное дерево. В дереве будут присутствовать только те узлы, которые специфичны для платформы (например, узлы <div> или <View>) и их пропсы. А вот компонентов, созданных разработчиками, в этом дереве не будет. Это очень удобно для тестирования с помощью снимков.

\n

testRenderer.toTree()

\n
testRenderer.toTree()
\n

Возвращает объект, представляющий собой отрендеренное дерево. В отличие от toJSON() в отрендеренное дерево попадут и пользовательские компоненты. Скорее всего, этот метод вряд ли будет полезен, пока вы не захотите создать собственную библиотеку тестирования поверх TestRenderer.

\n

testRenderer.update()

\n
testRenderer.update(element)
\n

Повторно рендерит находящееся в памяти дерево компонентов с учётом нового корневого элемента. По сути, это симуляция вызова React-обновления для корневого элемента. Если новый элемент имеет тот же тип и ключ, что и предыдущий, то дерево будет обновлено. Иначе, будет перемонтировано новое дерево.

\n

testRenderer.unmount()

\n
testRenderer.unmount()
\n

Демонтирует дерево, находящееся в памяти. При этом запустятся необходимые события жизненного цикла.

\n

testRenderer.getInstance()

\n
testRenderer.getInstance()
\n

Возвращает экземпляр соответствующий корневому элементу, если таковой существует. Этот метод не сработает, если верхним элементом будет функциональный компонент, потому что они не имеют экземпляров (в отличие от классовых компонентов).

\n

testRenderer.root

\n
testRenderer.root
\n

Возвращает корневой тестовый экземпляр, который полезен для проверок конкретных узлов дерева. Полученный экземпляр можно использовать и для поиска других тестовых экземпляров, расположенных глубже в дереве.

\n

testInstance.find()

\n
testInstance.find(test)
\n

Находит единственный вложенный тестовый экземпляр для которого test(testInstance) возвращает true. Метод test(testInstance) должен вернуть true ровно для одного тестового экземпляра, в противном случае будет сгенерирована ошибка.

\n

testInstance.findByType()

\n
testInstance.findByType(type)
\n

Находит единственный вложенный тестовый экземпляр с указанным типом type. Метод findByType сгенерирует ошибку, если тестовых экземпляров с указанным type не найдено или найдено больше одного.

\n

testInstance.findByProps()

\n
testInstance.findByProps(props)
\n

Находит единственный вложенный тестовый экземпляр с указанными пропсами props. Метод findByProps сгенерирует ошибку, если тестовых экземпляров с указанными пропсами не найдено или найдено больше одного.

\n

testInstance.findAll()

\n
testInstance.findAll(test)
\n

Находит все вложенные тестовые экземпляры, для которых test(testInstance) возвращает true.

\n

testInstance.findAllByType()

\n
testInstance.findAllByType(type)
\n

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

\n

testInstance.findAllByProps()

\n
testInstance.findAllByProps(props)
\n

Находит все вложенные тестовые экземпляры c указанными пропсами props.

\n

testInstance.instance

\n
testInstance.instance
\n

Экземпляр компонента, соответствующий его тестовому экземпляру. Свойство доступно только для классовых компонентов, т. к. функциональные компоненты не имеют экземпляров. Этот экземпляр компонента будет соответствовать значению this внутри данного компонента.

\n

testInstance.type

\n
testInstance.type
\n

Тип компонента, соответствующий его тестовому экземпляру. Например, компонент <Button /> имеет тип Button.

\n

testInstance.props

\n
testInstance.props
\n

Пропсы, соответствующие тестовому экземпляру. Например, у компонента <Button size="small" /> пропсами будут {size: "small"}.

\n

testInstance.parent

\n
testInstance.parent
\n

Родительский тестовый экземпляр текущего тестового экземпляра.

\n

testInstance.children

\n
testInstance.children
\n

Дочерние тестовые экземпляры текущего тестового экземпляра.

\n

Используем тестовый рендерер

\n

Можно передать функцию createNodeMock в TestRenderer.create как параметр для создания собственных фиктивных рефов. Функция createNodeMock принимает элемент и возвращает фиктивный реф-объект.

\n

Это может быть полезно для тестирования компонентов, которые используют рефы.

\n
import TestRenderer from 'react-test-renderer';\n\nclass MyComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.input = null;\n  }\n  componentDidMount() {\n    this.input.focus();\n  }\n  render() {\n    return <input type=\"text\" ref={el => this.input = el} />\n  }\n}\n\nlet focused = false;\nTestRenderer.create(\n  <MyComponent />,\n  {\n    createNodeMock: (element) => {\n      if (element.type === 'input') {\n        // возвращаем фиктивную функцию \"focus\"\n        return {\n          focus: () => {\n            focused = true;\n          }\n        };\n      }\n      return null;\n    }\n  }\n);\nexpect(focused).toBe(true);
","frontmatter":{"title":"Тестовый рендерер","next":null,"prev":null},"fields":{"path":"content/docs/reference-test-renderer.md","slug":"docs/test-renderer.html"}}},"pageContext":{"slug":"docs/test-renderer.html"}},"staticQueryHashes":[]}