{"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 with npm
\n

Тойм

\n

Уг пакэжэд React компонентыг DOM эсвэл натив мобайл орчноос үл хамааран, цэвэр Javascript объект руу рендэр хийхэд ашиглагдах React Renderer байгаа.

\n

React DOM эсвэл React Native компонентын рендэр хийсэн платформын харагдацыг дэс дараалалтай яг тухайн үеийнхээр харахад тусална.

\n

React DOM эсвэл React Native компонентын рендэр хийсэн платформын харагдацыг хөтөч, jsdom ашиглахгүйгээр, дэс дарааллаар харахад уг пакэж тусална (DOM салбар модны нэгэн адил)

\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-ын snapshot тест хийх функцыг ашиглан автоматаар файлын JSON tree-ын хуулбарыг хадгалах боломжтой ба өөрчлөлт орсон эсэхийг шалгах боломжтой: Дэлгэрэнгүйг.

\n

Та мөн үр дүн дотроос нь тодорхой node-ыг олох хайн олж, баталгаажуулах(assertion) боломжтой.

\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 instance

\n\n

TestInstance

\n\n

Reference

\n

TestRenderer.create()

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

React-ын дамжуулсан элементийг агуулсан TestRenderer instance үүсгэнэ. Жинхэнэ DOM ашиглахгүй хэрнээ компонентын салбар модыг санах ойд бүрэн рендэр хийдэг. Тэгэхээр нь та баталгаажуулах боломжтой. TestRenderer instance буцаана.

\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> гэх мэт зөвхөн тухайн нэг платформд зориулсан node агуулсан байдаг. Гэхдээ хэрэглэгчийн үүсгэсэн компонент энд байдаггүй. Snapshot testing хийхэд ашиглахад дөхөм байдаг.

\n

testRenderer.toTree()

\n
testRenderer.toTree()
\n

Рендэр хийсэн салбар модны объектыг буцаана. toJSON()-ын үүсгэсэн нэгэнтэй харьцуулахад илүү нарийвчилсан харагдах ба хэрэглэгчийн бичсэн компонент байдаг. Test renderer-ээс гадна та өөрийн сан үүсгэн бичээгүй л бол уг метод танд төдийлөн хэрэг болохгүй болов уу.

\n

testRenderer.update()

\n
testRenderer.update(element)
\n

Шинэ үндсэн элементийг агуулсан санах ой дахь модыг дахин рендэр хийнэ. Ингэснээр React-ын update-ыг бүр үндсээр нь хийгдэх боломж өгнө. Хэрэв шинэ элемент нь ижил төрлийнх байгаад, өмнөх элемент шиг чухал гол элемент мөн бол салбар мод нь шинэчлэгдэнэ. Үгүй бол шинэ салбар модыг дахин mount хийнэ.

\n

testRenderer.unmount()

\n
testRenderer.unmount()
\n

Санах ой дахь салбар модыг unmount хийнэ. Энэ нь холбогдох амьдралын мөчлөг эвент эхлүүлнэ.

\n

testRenderer.getInstance()

\n
testRenderer.getInstance()
\n

Хэрэв үндсэн элементэд холбогдох instance байвал түүн рүү буцна. Тухайн үндсэн элемент нь функц компонент бол ажиллахгүй. Яагаад гэвэл instance байхгүй.

\n

testRenderer.root

\n
testRenderer.root
\n

Салбар мод дахь тодорхой node-ыг баталгаажуулахад туслах “test instance” бүхий үндсэн объект руу буцна. Та үүнийг ашиглан салбар модны бүтцийн доогуур байгаа бусад “test instances”-ыг олж болно.

\n

testInstance.find()

\n
testInstance.find(test)
\n

test(testInstance) нь true гэж буцах удамшсан, дан test instance-ыг олно. Хэрэв тухайн нэг test instance-д test(testInstance) нь true гэж гарахгүй бол алдаа гарна.

\n

testInstance.findByType()

\n
testInstance.findByType(type)
\n

Тухайн type-т зохих удамшсан, дан test instance-ыг олно. Хэрэв тухайн type-т таарах нэг test instance байхгүй бол алдаа гарна.

\n

testInstance.findByProps()

\n
testInstance.findByProps(props)
\n

Тухайн props-т зохих удамшсан, дан test instance-ыг олно. Хэрэв тухайн props-т таарах нэг test instance байхгүй бол алдаа гарна.

\n

testInstance.findAll()

\n
testInstance.findAll(test)
\n

test(testInstance) нь true гэж буцах бүх удамшсан test instance-уудыг олно.

\n

testInstance.findAllByType()

\n
testInstance.findAllByType(type)
\n

Тухайн type-д нийцэх бүх удамшсан test instance-ыг олно.

\n

testInstance.findAllByProps()

\n
testInstance.findAllByProps(props)
\n

Тухайн props-т нийцэх бүх удамшсан test instance-ыг олно.

\n

testInstance.instance

\n
testInstance.instance
\n

Уг test instance-т холбогдох компонент instance. Функц компонентууд instance байхгүй учраас зөвхөн класс компонентууд л байна. Өгөгдсөн компонентын доторх this утгатай таардаг.

\n

testInstance.type

\n
testInstance.type
\n

Уг test instance-т холбогдох компонентын төрөл. Жишээ нь <Button /> компонент нь Button гэсэн төрөлтэй.

\n

testInstance.props

\n
testInstance.props
\n

Уг test instance-т холбогдох пропс. Жишээ нь <Button size=\"small\" /> компонент нь {size: 'small'} гэсэн пропстой.

\n

testInstance.parent

\n
testInstance.parent
\n

Тухайн test instance-ын эцэг test instance.

\n

testInstance.children

\n
testInstance.children
\n

Тухайн test instance-ын хүү test instance.

\n

Ideas

\n

Та createNodeMock функцийг TestRenderer.create-руу сонголтоор өгч, дамжуулж болно. Тэгвэл тусгай mock refs үүсэх боломжтой болно. createNodeMock нь одоогийн элементийг хүлээн авах ба mock ref объектыг буцаана. Refs-ээс хамаарал бүхий компонентыг тест хийхэд хэрэг болдог.

\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        // mock a focus function\n        return {\n          focus: () => {\n            focused = true;\n          }\n        };\n      }\n      return null;\n    }\n  }\n);\nexpect(focused).toBe(true);
","frontmatter":{"title":"Test Renderer","next":null,"prev":null},"fields":{"path":"content/docs/reference-test-renderer.md","slug":"docs/test-renderer.html"}}},"pageContext":{"slug":"docs/test-renderer.html"}},"staticQueryHashes":[]}