الفرق بين المراجعتين ل"React/test utils"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
(أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:أدوات الاختبار}}</noinclude>')
 
سطر 1: سطر 1:
 
<noinclude>{{DISPLAYTITLE:أدوات الاختبار}}</noinclude>
 
<noinclude>{{DISPLAYTITLE:أدوات الاختبار}}</noinclude>
 +
 +
== استيراد الأدوات ==
 +
<syntaxhighlight lang="javascript">
 +
import ReactTestUtils from 'react-dom/test-utils'; // ES6
 +
var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm
 +
 +
</syntaxhighlight>
 +
 +
== لمحة عامة ==
 +
تزيد أدوات الاختبار <code>ReactTestUtils</code> من سهولة اختبار مكوّنات React في إطار عمل الاختبار الذي تريده. يستخدم Facebook الأداة Jest لاختبار JavaScript بسهولة. تعلم كيفية البدء مع Jest عبر درس React في موقع Jest.
 +
 +
ملاحظة: أطلقت Airbnb أداة اختبار تُدعى Enzyme والتي تجعل من السهل التعامل مع ناتج مكوّناتك. إن قرّرت استخدام أداة اختبار أخرى مع Jest فقد تستحق تجربتها من هنا.
 +
 +
هنالك أداة بديلة أخرى تُدعى react-testing-library مُصمَّمة لتمكين وتشجيع كتابة اختبارات لاستخدامها مع مكوّناتك بينما يستخدمها المستخدم النهائي. تعمل أيضًا مع أي مُشغِّل اختبار.
 +
 +
== مرجع ==
 +
 +
=== التصيير السطحي (Shallow Rendering) ===
 +
عند كتابة وحدات اختبار لمكتبة React يكون التصيير السطحي مفيدًا لك. يُتيح لك التصيير السطحي تصيير مكوّن على عمق مستوى واحد وتوضيح الحقائق حول ما يُعيده تابع التصيير، بدون القلق حول سلوك المكوّنات الأبناء والتي لم تُصيَّر أو ينشأ عنها نسخة. لا يحتاج ذلك إلى DOM.
 +
 +
ملاحظة: انتقل التصيير السطحي إلى react-test-renderer/shallow. تعلم المزيد حول التصيير السطحي في صفحة التوثيق الخاصّة به.
 +
 +
=== أدوات أخرى ===
 +
 +
==== Simulate ====
 +
<syntaxhighlight lang="javascript">
 +
Simulate.{eventName}(
 +
  element,
 +
  [eventData]
 +
)
 +
 +
</syntaxhighlight>محاكاة حدث في عقدة DOM مع خيار إضافي لبيانات الأحداث <code>eventData</code>.
 +
 +
تمتلك الأداة Simulate تابعًا لكل حدث تفهمه React.
 +
 +
الضغط على العنصر:<syntaxhighlight lang="javascript">
 +
// <button ref={(node) => this.button = node}>...</button>
 +
const node = this.button;
 +
ReactTestUtils.Simulate.click(node);
 +
 +
</syntaxhighlight>تغيير القيمة لحقل الإدخال ثمّ الضغط على <code>ENTER</code>:<syntaxhighlight lang="javascript">
 +
// <input ref={(node) => this.textInput = node} />
 +
const node = this.textInput;
 +
node.value = 'giraffe';
 +
ReactTestUtils.Simulate.change(node);
 +
ReactTestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13});
 +
 +
</syntaxhighlight>'''ملاحظة:''' يجب عليك تزويد أي خاصيّة حدث تستخدمها في مكوّنك (مثل KeyCode، و Which، إلخ...) لأنّ React لا تُنشِئ أي من هذه الخاصيّات لأجلك.
 +
 +
==== <code>renderIntoDocument()‎</code> ====
 +
<syntaxhighlight lang="javascript">
 +
renderIntoDocument(element)
 +
</syntaxhighlight>

مراجعة 02:56، 9 سبتمبر 2018


استيراد الأدوات

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

لمحة عامة

تزيد أدوات الاختبار ReactTestUtils من سهولة اختبار مكوّنات React في إطار عمل الاختبار الذي تريده. يستخدم Facebook الأداة Jest لاختبار JavaScript بسهولة. تعلم كيفية البدء مع Jest عبر درس React في موقع Jest.

ملاحظة: أطلقت Airbnb أداة اختبار تُدعى Enzyme والتي تجعل من السهل التعامل مع ناتج مكوّناتك. إن قرّرت استخدام أداة اختبار أخرى مع Jest فقد تستحق تجربتها من هنا.

هنالك أداة بديلة أخرى تُدعى react-testing-library مُصمَّمة لتمكين وتشجيع كتابة اختبارات لاستخدامها مع مكوّناتك بينما يستخدمها المستخدم النهائي. تعمل أيضًا مع أي مُشغِّل اختبار.

مرجع

التصيير السطحي (Shallow Rendering)

عند كتابة وحدات اختبار لمكتبة React يكون التصيير السطحي مفيدًا لك. يُتيح لك التصيير السطحي تصيير مكوّن على عمق مستوى واحد وتوضيح الحقائق حول ما يُعيده تابع التصيير، بدون القلق حول سلوك المكوّنات الأبناء والتي لم تُصيَّر أو ينشأ عنها نسخة. لا يحتاج ذلك إلى DOM.

ملاحظة: انتقل التصيير السطحي إلى react-test-renderer/shallow. تعلم المزيد حول التصيير السطحي في صفحة التوثيق الخاصّة به.

أدوات أخرى

Simulate

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

محاكاة حدث في عقدة DOM مع خيار إضافي لبيانات الأحداث eventData.

تمتلك الأداة Simulate تابعًا لكل حدث تفهمه React.

الضغط على العنصر:

// <button ref={(node) => this.button = node}>...</button>
const node = this.button;
ReactTestUtils.Simulate.click(node);

تغيير القيمة لحقل الإدخال ثمّ الضغط على ENTER:

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

ملاحظة: يجب عليك تزويد أي خاصيّة حدث تستخدمها في مكوّنك (مثل KeyCode، و Which، إلخ...) لأنّ React لا تُنشِئ أي من هذه الخاصيّات لأجلك.

renderIntoDocument()‎

renderIntoDocument(element)
مجلوبة من "https://wiki.hsoub.com/index.php?title=React/test_utils&oldid=17334"