الفرق بين المراجعتين لصفحة: «React/shallow renderer»

من موسوعة حسوب
لا ملخص تعديل
لا ملخص تعديل
سطر 37: سطر 37:
</syntaxhighlight>يمتلك الاختبار السطحي حاليًّا بعض المحدوديات، منها عدم دعم المراجع.
</syntaxhighlight>يمتلك الاختبار السطحي حاليًّا بعض المحدوديات، منها عدم دعم المراجع.


'''ملاحظة:''' نوصي بالتحقق من واجهة برمجة تطبيق التصيير السطحي التي تُدعى Enzyme. فهي تُزوِّدنا بواجهة برمجة تطبيق ذات مستوى أعلى وأفضل وبنفس الوظيفة.
'''ملاحظة:''' نوصي بالتحقق من [http://airbnb.io/enzyme/docs/api/shallow.html واجهة برمجة تطبيق التصيير السطحي] Enzyme. فهي تُزوِّدنا بواجهة برمجة تطبيق ذات مستوى أعلى وأفضل وبنفس الوظيفة.


== مرجع ==
== مرجع ==
سطر 44: سطر 44:
بإمكانك التفكير بالتصيير السطحي كمكان لتصيير المكوّن الذي تختبره، والذي منه تستطيع استخراج ناتج المكوّن.
بإمكانك التفكير بالتصيير السطحي كمكان لتصيير المكوّن الذي تختبره، والذي منه تستطيع استخراج ناتج المكوّن.


إنّ التابع <code>shallowRenderer.render()‎</code> مشابه للتابع <code>ReactDOM.render()</code>‎ ولكنّه لا يتطلّب DOM ويُصيِّر فقط مستوى أدنى وحيد. يعني هذا أنّك تستطيع اختبار المكوّنات بشكل معزول عن مكوّناتها الأبناء.
إنّ التابع <code>shallowRenderer.render()‎</code> مشابه للتابع <code>[[React/react dom#render.28.29.E2.80.8E|ReactDOM.render()]]</code>‎ ولكنّه لا يتطلّب DOM ويُصيِّر فقط مستوى أدنى وحيد. يعني هذا أنّك تستطيع اختبار المكوّنات بشكل معزول عن مكوّناتها الأبناء.


=== <code>shallowRenderer.getRenderOutput()‎</code> ===
=== <code>shallowRenderer.getRenderOutput()‎</code> ===

مراجعة 12:51، 10 سبتمبر 2018


الاستيراد

import ShallowRenderer from 'react-test-renderer/shallow'; // ES6
var ShallowRenderer = require('react-test-renderer/shallow'); // ES5 with npm

لمحة عامة

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

على سبيل المثال إن كان لديك المكوّن التالي:

function MyComponent() {
  return (
    <div>
      <span className="heading">العنوان</span>
      <Subcomponent foo="bar" />
    </div>
  );
}

بإمكانك كتابة ما يلي:

import ShallowRenderer from 'react-test-renderer/shallow';

// في اختبارك:
const renderer = new ShallowRenderer();
renderer.render(<MyComponent />);
const result = renderer.getRenderOutput();

expect(result.type).toBe('div');
expect(result.props.children).toEqual([
  <span className="heading">العنوان</span>,
  <Subcomponent foo="bar" />
]);

يمتلك الاختبار السطحي حاليًّا بعض المحدوديات، منها عدم دعم المراجع.

ملاحظة: نوصي بالتحقق من واجهة برمجة تطبيق التصيير السطحي Enzyme. فهي تُزوِّدنا بواجهة برمجة تطبيق ذات مستوى أعلى وأفضل وبنفس الوظيفة.

مرجع

shallowRenderer.render()‎

بإمكانك التفكير بالتصيير السطحي كمكان لتصيير المكوّن الذي تختبره، والذي منه تستطيع استخراج ناتج المكوّن.

إنّ التابع shallowRenderer.render()‎ مشابه للتابع ReactDOM.render()‎ ولكنّه لا يتطلّب DOM ويُصيِّر فقط مستوى أدنى وحيد. يعني هذا أنّك تستطيع اختبار المكوّنات بشكل معزول عن مكوّناتها الأبناء.

shallowRenderer.getRenderOutput()‎

بعد استدعاء التابع shallowRenderer.render()‎ بإمكانك استخدام التابع shallowRenderer.getRenderOutput()‎ للحصول على الناتج المُصيَّر.

بإمكانك بعدها البدء بتجميع الحقائق حول الناتج.

مصادر