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

این پکیج یک رندر کننده ری‌اکت (renderer) را ارایه می‌کند که می‌توان از آن برای رندر کامپوننت‌های ری‌اکت به یک آبجکت جاوااسکریپت خالص، بدون وابستگی به DOM یا محیط native موبایل استفاده کرد.

\n

اساسا، این پکیج گرفتن یک اسنپ‌شات از سلسله مراتب پلفترم(مشابه درخت DOM) رندر شده توسط یک DOM ری‌اکت یا کامپوننت ری‌اکت نیتیو را بدون استفاده از مرورگر یا 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 همراه با پاس دادن یک المنت ری‌اکت بسازید. این از DOM واقعی استفاده نمی‌کند، اما همچنان درخت کامپوننت را در حافظه به طور کامل رندر می‌کند و شما می‌توانید در مورد آن تست بنویسید. یک نمونه TestRenderer باز می‌گرداند.

\n

TestRenderer.act()

\n
TestRenderer.act(callback);
\n

مانند [متد] کمکی act() از react-dom/test-utils، TestRenderer.act هم یک کامپوننت برای تست‌ها (assertions) آماده می‌کند. از این ورژن act() برای دربر گرفتن فراخوانی‌ها به TestRenderer.create و 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> و props آن‌ها را شامل می‌شود، اما شامل هیچ کامپوننتی که نوشته کاربر باشد نیست. این برای تست اسنپ‌شات مفید است.

\n

testRenderer.toTree()

\n
testRenderer.toTree()
\n

یک آبجکت که درخت رندر شده را نمایش می‌دهند برمی‌گرداند. بیانگر جزییات بیشتری نسبت به چیزی که toJSON() فراهم می‌کند است و شامل کامپوننت‌های نوشته شده توسط کاربر هم می‌شود. شما احتمالا به این متد نیازی ندارید مگر اینکه کتابخانه تست خودتان را روی test renderer بنویسید.

\n

testRenderer.update()

\n
testRenderer.update(element)
\n

درخت درون حافظه را با یک المنت root جدید دوباره رندر می‌کند. این یک به‌روزرسانی ری‌اکت در root را شبیه‌سازی می‌کند. اگر المنت جدید نوع و کلید یکسان با المنت قبلی داشت، درخت به‌روز خواهد شد. در غیراینصورت، دوباره یک درخت جدید ایجاد خواهد کرد.

\n

testRenderer.unmount()

\n
testRenderer.unmount()
\n

درخت درون حافظه را با اجرای رویدایدهای چرخه‌حیات مناسب نابود (unmount) خواهد کرد.

\n

testRenderer.getInstance()

\n
testRenderer.getInstance()
\n

نمونه متناظر با المنت root را، اگر در دسترس باشد، برمی‌گرداند. اگر المنت root یک کامپوننت تابعی باشد کار نمی‌کند چرا که آن‌ها نمونه ندارند.

\n

testRenderer.root

\n
testRenderer.root
\n

root آبجکت “test instance” که برای ایجاد تست‌ها در مورد نودهای خاص در درخت کاربردی است را برمی‌گرداند. شما می‌توانید برای پیدا کردن یک “test instances” دیگر در عمق‌های پایین‌تر از آن استفاده کنید.

\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

props متناظر با این نمونه تست است. برای مثال، یک کامپوننت <Button size="small" />، {size: 'small'} را به عنوان props دارد.

\n

testInstance.parent

\n
testInstance.parent
\n

نمونه تست والد این نمونه تست است.

\n

testInstance.children

\n
testInstance.children
\n

نمونه تست فرزند این نمونه تست است.

\n

ایده‌ها

\n

شما می‌توانید تابع createNodeMock را به عنوان یک ویزگی اختیاری به TestRenderer.create پاس دهید که اجازه ساخت mock refs شخصی‌سازی شده را می‌دهد.\ncreateNodeMock المنت کنونی را می‌پذیر و باید یک آبجکت mock ref برگرداند.\nاین زمانی که یک کامپوننت که به 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":[]}