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

الاستيراد

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

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

انظر أيضًا

مصادر

صفحة التصيير السطحي في توثيق React الرسمي.