{"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

По суті, цей пакет дозволяє легко зробити знімок ієрархії вигляду платформи (подібно до дерева 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\">Привіт</p>\n    </div>\n  )\n}\n\nfunction SubComponent() {\n  return (\n    <p className=\"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(['Під']);
\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

Similar to the act() helper from react-dom/test-utils, TestRenderer.act prepares a component for assertions. Use this version of act() to wrap calls to TestRenderer.create and testRenderer.update.

\n
import {create, act} from 'react-test-renderer';\nimport App from './app.js'; // The component being tested\n\n// render the component\nlet root; \nact(() => {\n  root = create(<App value={1}/>)\n});\n\n// make assertions on root \nexpect(root.toJSON()).toMatchSnapshot();\n\n// update with some different props\nact(() => {\n  root.update(<App value={2}/>);\n})\n\n// make assertions on root \nexpect(root.toJSON()).toMatchSnapshot();
\n

testRenderer.toJSON()

\n
testRenderer.toJSON()
\n

Повертає об’єкт, що представляє відрендерене дерево. Це дерево містить лише специфічні для платформи вузли типу <div> або <View> та їх реквізит, але не містить компонентів написаних користувачем. Це зручно для тестування з використанням знімків.

\n

testRenderer.toTree()

\n
testRenderer.toTree()
\n

<<<<<<< HEAD\n<<<<<<< HEAD\nПовертає об’єкт, що представляє відрендерене дерево. Представлений об’єкт – більш деталізований, ніж те, що повертає toJSON (), та включає в себе написані користувачем компоненти. Ймовірно, вам не потрібен цей метод, якщо ви не пишете власну бібліотеку тверджень поверх тестового рендерера.\n=======\nReturn an object representing the rendered tree. The representation is more detailed than the one provided by toJSON(), and includes the user-written components. You probably don’t need this method unless you’re writing your own assertion library on top of the test renderer.

\n
\n
\n
\n
\n
\n
\n
\n

941f54180ef5e652221f54ef6d1f6f2e9e063597

\n

Return an object representing the rendered tree. The representation is more detailed than the one provided by toJSON(), and includes the user-written components. You probably don’t need this method unless you’re writing your own assertion library on top of the test renderer.\n6dcb963479953586f462ce31fddf35158c0598a0

\n
\n
\n
\n
\n
\n
\n
\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. Якщо єдиного тестового екземпляру з наведеним type не існує, він видасть помилку.

\n

testInstance.findByProps()

\n
testInstance.findByProps(props)
\n

Знаходить єдиний тестовий екземпляр відповідно до значення props. Якщо єдиного тестового екземпляру з наведеним props не існує, він видасть помилку.

\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

Знаходить всі тестові екземпляри відповідно до значення 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 як опцію, яка дозволяє рефи макетів користувача.\ncreateNodeMock приймає поточний елемент і повинна повернути об’єкт рефу макета.\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":[]}