الفرق بين المراجعتين ل"React/shallow renderer"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
ط (تحديث الصفحة، والعنوان، والتصنيفات)
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE:التصيير السطحي (Shallow Rendering)}}</noinclude>
+
<noinclude>{{DISPLAYTITLE:التصيير السطحي (Shallow Rendering) في React}}</noinclude>
 
== الاستيراد ==
 
== الاستيراد ==
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
سطر 58: سطر 58:
 
* [[React/events|الأحداث المصطنعة (Synthetic Events)]]
 
* [[React/events|الأحداث المصطنعة (Synthetic Events)]]
 
* [[React/test utils|أدوات الاختبار]]
 
* [[React/test utils|أدوات الاختبار]]
* التصيير السطحي (Shallow Rendering) (الصفحة الحالية)
 
 
* [[React/test renderer|مصير الاختبار (Test Renderer)]]
 
* [[React/test renderer|مصير الاختبار (Test Renderer)]]
 
* [[React/javascript environment requirements|متطلبات بيئة JavaScript]]
 
* [[React/javascript environment requirements|متطلبات بيئة JavaScript]]
 
==مصادر==
 
==مصادر==
 
*[https://reactjs.org/docs/shallow-renderer.html صفحة التصيير السطحي في توثيق React الرسمي].
 
*[https://reactjs.org/docs/shallow-renderer.html صفحة التصيير السطحي في توثيق React الرسمي].
 +
[[تصنيف:React]]
 +
[[تصنيف:React Advanced Guides]]

مراجعة 14:26، 24 فبراير 2019

الاستيراد

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()‎ للحصول على الناتج المُصيَّر.

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

انظر أيضًا

مصادر