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

ایمپورت کردن

\n
import ReactTestUtils from 'react-dom/test-utils'; // ES6\nvar ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm
\n

بررسی اجمالی

\n

ReactTestUtils عملیات تست کامپوننت‌های ری‌اکت را در فریموورک موردنظرتان ساده می‌کند. ما در فیسبوک از Jest برای تست کردن جاوااسکریپتی بدون دردسر استفاده می‌کنیم. برای اینکه یاد بگیرید از کجا شروع کنید از React Tutorial سایت Jest استفاده نمایید.

\n
\n

نکته:

\n

ما استفاده از React Testing Library را پیش‌نهاد می‌کنیم، از آن‌جا که طراحی آن با هدف قادر ساختن و تشویق شما به نوشتن تست‌ به گونه‌ای است که کاربر نهایی کامپوننت شما را استفاده می‌کند.

\n

به عنوان جایگزین، Airbnb یک ابزار تست به نام Enzyme منتشر کرده‌است که بررسی، دستکاری و ارزیابی خروجی کامپوننت‌های ری‌اکت شما را ساده می‌کند.

\n
\n\n

مرجع

\n

act()

\n

برای آماده‌سازی یک کامپوننت برای اثبات، کدی که آن را رندر و به‌روز رسانی می‌کند را درون یک فراخوانی act() قرار دهید. این‌کار باعث می‌شود تست شما به روش کارکرد ری‌اکت در مرورگر نزدیک‌تر شود.

\n
\n

نکته

\n

اگر از react-test-renderer استفاده می‌کنید، یک خروجی act که به همین شکل رفتار می‌کند برایتان فراهم می‌کند.

\n
\n

برای مثال، اجازه دهید بگوییم این کامپوننت Counter را داریم:

\n
class Counter extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {count: 0};\n    this.handleClick = this.handleClick.bind(this);\n  }\n  componentDidMount() {\n    document.title = `You clicked ${this.state.count} times`;\n  }\n  componentDidUpdate() {\n    document.title = `You clicked ${this.state.count} times`;\n  }\n  handleClick() {\n    this.setState(state => ({\n      count: state.count + 1,\n    }));\n  }\n  render() {\n    return (\n      <div>\n        <p>You clicked {this.state.count} times</p>\n        <button onClick={this.handleClick}>\n          Click me\n        </button>\n      </div>\n    );\n  }\n}
\n

به این شکل آن را تست می‌کنیم:

\n
import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { act } from 'react-dom/test-utils';import Counter from './Counter';\n\nlet container;\n\nbeforeEach(() => {\n  container = document.createElement('div');\n  document.body.appendChild(container);\n});\n\nafterEach(() => {\n  document.body.removeChild(container);\n  container = null;\n});\n\nit('can render and update a counter', () => {\n  // Test first render and componentDidMount\n  act(() => {    ReactDOM.render(<Counter />, container);  });  const button = container.querySelector('button');\n  const label = container.querySelector('p');\n  expect(label.textContent).toBe('You clicked 0 times');\n  expect(document.title).toBe('You clicked 0 times');\n\n  // Test second render and componentDidUpdate\n  act(() => {    button.dispatchEvent(new MouseEvent('click', {bubbles: true}));  });  expect(label.textContent).toBe('You clicked 1 times');\n  expect(document.title).toBe('You clicked 1 times');\n});
\n\n
\n

mockComponent()

\n
mockComponent(\n  componentClass,\n  [mockTagName]\n)
\n

یک ماژول کامپوننت mock شده به این متد پاس دهید تا آن را به متدهای سودمندی که به آن اجازه می‌دهند که به عنوان یک کامپوننت ساختگی ری‌اکت استفاده شود تبدیل کنید. به جای این‌که مثل همیشه رندر شود، کامپوننت یک <div> ساده (یا تگ دیگری اگر mockTagName فراهم شده باشد) خواهد شد که هر فرزندی را که فراهم شده‌‌باشد، دربر می‌گیرد.

\n
\n

نکته:

\n

mockComponent() یک API قدیمی است. ما استفاده از jest.mock() را به عنوان جایگزین پیشنهاد می‌کنیم.

\n
\n
\n

isElement()

\n
isElement(element)
\n

اگر element هر المنت ری‌اکتی باشد true برمی‌گرداند.

\n
\n

isElementOfType()

\n
isElementOfType(\n  element,\n  componentClass\n)
\n

اگر element یک المنت ری‌اکت که از نوع componentClass ری‌اکت است باشد، true بازمی‌گرداند.

\n
\n

isDOMComponent()

\n
isDOMComponent(instance)
\n

اگر instance یک کامپوننت DOM باشد (مانند یک <div> یا <span>) مقدار true برمی‌گرداند.

\n
\n

isCompositeComponent()

\n
isCompositeComponent(instance)
\n

اگر instance یک کامپوننت تعریف شده توسط کاربر مانند یک کلاس یا یک تابع باشد، مقدار true را برمی‌گرداند.

\n
\n

isCompositeComponentWithType()

\n
isCompositeComponentWithType(\n  instance,\n  componentClass\n)
\n

اگر instance یک کامپوننت از نوع componentClass ری‌اکت باشد مقدار true را برمی‌گرداند.

\n
\n

findAllInRenderedTree()

\n
findAllInRenderedTree(\n  tree,\n  test\n)
\n

از تمامی کامپوننت ها در tree عبور می‌کند و تمام کامپوننت‌هایی که test(component) آن‌ها مقدار true دارد را ذخیره می‌کند. به تنهایی کاربردی ندارد، اما به عنوان یک قدم اولیه برای دیگر ابزارهای تست استفاده می‌شود.

\n
\n

scryRenderedDOMComponentsWithClass()

\n
scryRenderedDOMComponentsWithClass(\n  tree,\n  className\n)
\n

تمامی المنت‌های DOM در کامپوننت‌های درخت رندر شده را که کامپوننت‌هایی هستند که نام کلاسشان با className برابر است را پیدا می‌کند.

\n
\n

findRenderedDOMComponentWithClass()

\n
findRenderedDOMComponentWithClass(\n  tree,\n  className\n)
\n

شبیه scryRenderedDOMComponentsWithClass() است اما انتظار دارد که تنها یک نتیجه وجود داشته باشد، یا اگر هر تعدادی به غیر از یک نتیجه پیدا کند یک خطا می‌اندازد.

\n
\n

scryRenderedDOMComponentsWithTag()

\n
scryRenderedDOMComponentsWithTag(\n  tree,\n  tagName\n)
\n

تمامی المنت‌های DOM در کامپوننت‌های درخت رندر شده را که کامپوننت‌هایی هستند که نام تگشان با tagName برابر است را پیدا می‌کند.

\n
\n

findRenderedDOMComponentWithTag()

\n
findRenderedDOMComponentWithTag(\n  tree,\n  tagName\n)
\n

شبیه scryRenderedDOMComponentsWithTag() است اما انتظار دارد که تنها یک نتیجه وجود داشته باشد، یا اگر هر تعدادی به غیر از یک نتیجه پیدا کند یک خطا می‌اندازد.

\n
\n

scryRenderedComponentsWithType()

\n
scryRenderedComponentsWithType(\n  tree,\n  componentClass\n)
\n

تمامی instance های کامپوننت‌ها با نوع componentClass را پیدا می‌کند.

\n
\n

findRenderedComponentWithType()

\n
findRenderedComponentWithType(\n  tree,\n  componentClass\n)
\n

مانند scryRenderedComponentsWithType() است اما انتظار دارد که تنها یک نتیجه وجود داشته باشد، یا اگر هر تعدادی به غیر از یک نتیجه پیدا کند یک خطا باز می‌گرداند.

\n
\n

renderIntoDocument()

\n
renderIntoDocument(element)
\n

یک المنت ری‌اکت را در یک نود DOM جدا شده در document رندر می‌کند. این تابع یک DOM نیاز دارد. معادل است با:

\n
const domContainer = document.createElement('div');\nReactDOM.render(element, domContainer);
\n
\n

نکته:

\n

شما به window، window.document و window.document.createElement قبل از اینکه React را ایمپورت کنید و با دسترسی عمومی نیاز خواهید داشت. در غیر اینصورت ری‌اکت فکر می‌کند که نمی‌تواند به DOM دسترسی پیدا کند و متدهایی مانند setState کار نخواهند کرد.

\n
\n
\n

دیگر ابزارها

\n

Simulate

\n
Simulate.{eventName}(\n  element,\n  [eventData]\n)
\n

توزیع یک رویداد روی یک نود DOM با eventData داده اختیاری برای رویداد شبیه‌سازی می‌کند.

\n

Simulate یک متد برای هر رویدادی که ری‌اکت می‌فهمد دارد.

\n

کلیک کردن روی یک المنت

\n
// <button ref={(node) => this.button = node}>...</button>\nconst node = this.button;\nReactTestUtils.Simulate.click(node);
\n

تغییر مقدار یک فیلد ورودی و سپس فشردن ENTER.

\n
// <input ref={(node) => this.textInput = node} />\nconst node = this.textInput;\nnode.value = 'giraffe';\nReactTestUtils.Simulate.change(node);\nReactTestUtils.Simulate.keyDown(node, {key: \"Enter\", keyCode: 13, which: 13});
\n
\n

نکته

\n

شما باید هرگونه ویژگی رویدادی که در کامپوننتان استفاه می‌کنید (مانند keyCode, which, etc…) را فراهم کنید چرا که ری‌اکت هیچ یک از ان‌ها را برای شما ایجاد نمی‌کند.

\n
\n
","frontmatter":{"title":"ابزارهای تست","next":null,"prev":null},"fields":{"path":"content/docs/addons-test-utils.md","slug":"docs/test-utils.html"}}},"pageContext":{"slug":"docs/test-utils.html"}},"staticQueryHashes":[]}