عرض مصدر React/shallow renderer

<noinclude>{{DISPLAYTITLE:التصيير السطحي (Shallow Rendering)}}</noinclude>

== الاستيراد ==
<syntaxhighlight lang="javascript">
import ShallowRenderer from 'react-test-renderer/shallow'; // ES6
var ShallowRenderer = require('react-test-renderer/shallow'); // ES5 with npm

</syntaxhighlight>

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

على سبيل المثال إن كان لديك المكوّن التالي:<syntaxhighlight lang="javascript">
function MyComponent() {
  return (
    <div>
      <span className="heading">العنوان</span>
      <Subcomponent foo="bar" />
    </div>
  );
}

</syntaxhighlight>بإمكانك كتابة ما يلي:<syntaxhighlight lang="javascript">
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" />
]);

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

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

== مرجع ==

=== <code>shallowRenderer.render()‎</code> ===
بإمكانك التفكير بالتصيير السطحي كمكان لتصيير المكوّن الذي تختبره، والذي منه تستطيع استخراج ناتج المكوّن.

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

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

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

==مصادر==
*[https://reactjs.org/docs/shallow-renderer.html صفحة التصيير السطحي في توثيق React الرسمي].