مصير الاختبار (Test Renderer) في React

الاستيراد

import TestRenderer from 'react-test-renderer'; // ES6
const TestRenderer = require('react-test-renderer'); // ES5 with npm

لمحة عامة

تُزوّدنا هذه الحزمة بمُصيِّر React يُمكِن استخدامه لتصيير مكوّنات React إلى كائنات JavaScript نقيّة بدون الاعتماد على DOM أو بيئة الهاتف المحمول الأصليّة.

تُسهِّل هذه الحزمة بشكل أساسي من أخذ صورة حول التسلسل الهرمي للمكوّنات (مشابه لشجرة DOM) والتي يُصيّرها React DOM أو React Native بدون استخدام المتصفح أو jsdom.

مثال:

import TestRenderer from 'react-test-renderer';

function Link(props) {
  return <a href={props.page}>{props.children}</a>;
}

const testRenderer = TestRenderer.create(
  <Link page="https://www.facebook.com/">Facebook</Link>
);

console.log(testRenderer.toJSON());
// { type: 'a',
//   props: { href: 'https://www.facebook.com/' },
//   children: [ 'Facebook' ] }

نستطيع استخدام ميزة الاختبار بالتقاط الصورة الموجودة في Jest لحفظ نسخة عن شجرة JSON بشكل تلقائي إلى ملف والتحقق في اختباراتك من أنّها لم تتغيّر. تعلّم المزيد حول ذلك. بإمكانك أيضًا التنقل في الناتج لإيجاد عقد محددة:

import TestRenderer from 'react-test-renderer';

function MyComponent() {
  return (
    <div>
      <SubComponent foo="bar" />
      <p className="my">أهلًا</p>
    </div>
  )
}

function SubComponent() {
  return (
    <p className="sub">فرعي</p>
  );
}

const testRenderer = TestRenderer.create(<MyComponent />);
const testInstance = testRenderer.root;

expect(testInstance.findByType(SubComponent).props.foo).toBe('bar');
expect(testInstance.findByProps({className: "sub"}).children).toEqual(['Sub']);

مرجع

`TestRenderer.create()‎`

TestRenderer.create(element, options);

إنشاء نسخة من TestRenderer مع عنصر React المُمرَّر. لا يستخدم هذا التابع DOM الحقيقي ولكنّه يُصيِّر بشكل كامل شجرة المكوّنات في الذاكرة. تملك النسخة المُعادة التوابع والخاصيّات التالية. وتعيد نسخة من الصنف TestRendere.

`TestRenderer.act()‎`

TestRenderer.act(callback);

على غرار الفعل act()‎ منreact-dom/test-utils ، تحضّر TestRenderer.act المكون لإجراء اختبار عليه. استخدم هذا الإصدار من act()‎ لتغليف استدعاءات TestRenderer.create و testRenderer.update.

import {create, act} from 'react-test-renderer';
import App from './app.js'; // المُكونة المُختبرة

// تصيير المكون
let root; 
act(() => {
  root = create(<App value={1}/>)
});

// root جعل التأكيدات على الجذر 
expect(root.toJSON()).toMatchSnapshot();

// تحديث بخاصيات مختلفة
act(() => {
  root.update(<App value={2}/>);
})

// root جعل التأكيدات على الجذر 
expect(root.toJSON()).toMatchSnapshot();

`testRenderer.toJSON()‎`

testRenderer.toJSON()

يُعيد كائن يُمثِّل الشجرة المُصيَّرة. تحتوي هذه الشجرة على عُقَد خاصّة بالمنصّة مثل ‎<div>‎ أو ‎<View>‎ وخاصيّاتها، ولكنّه لا يحتوي على مكوّنات مكتوبة من قبل المستخدم. يُفيد هذا لأجل اختبار اللقطات (snapshot testing).

`testRenderer.toTree()‎`

testRenderer.toTree()

يُعيد كائن يُمثِّل الشجرة المُصيَّرة. وعلى النقيض من التابع toJSON()‎ يكون التمثيل أكثر تفصيلًا ويتضمّن المكوّنات المكتوبة من قبل المستخدم. لن تحتاج هذا التابع غالبًا إلّا إذا كنت تكتب مكتبتك الخاصّة بناءً على مُصيِّر الاختبار.

`testRenderer.update()‎`

testRenderer.update(element)

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

`testRenderer.unmount()‎`

testRenderer.unmount()

يفصل الشجرة الموجودة في الذاكرة، وبذلك يُطلِق أحداث دورة الحياة المناسبة.

`testRenderer.getInstance()‎`

testRenderer.getInstance()

يُعيد النسخة الموافقة للعنصر الجذري إن كانت موجودة. لن يعمل هذا التابع إن كان العنصر الجذري عبارة عن مكوّن دالة لأنّها لا تمتلك نُسَخًا مثل مكوّنات الأصناف.

`testRenderer.root`

testRenderer.root

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

`testInstance.find()‎`

testInstance.find(test)

إيجاد نسخة الاختبار الوحيدة المنحدرة التي يُعيد فيها التابع test(testInstance)‎ القيمة true. إن كان التابع test(testInstance)‎ لا يُعيد القيمة true لنسخة اختبار وحيدة بالضبط فسيرمي هذا التابع خطأً.

`testInstance.findByType()‎`

testInstance.findByType(type)

إيجاد نسخة اختبار وحيدة منحدرة من النوع المُعطى ضمن الوسيط type. إن لم يكن هنالك بالضبط نسخة اختبار وحيدة فسيرمي هذا التابع خطأً.

`testInstance.findByProps()‎`

testInstance.findByProps(props)

إيجاد نسخة اختبار وحيدة منحدرة التي تمتلك الخاصيّات المُزوَّدة عن طريق الوسيط props. إن لم يكن هنالك بالضبط نسخة اختبار وحيدة تمتلك الخاصيّات المطلوبة فسيرمي هذا التابع خطأً.

`testInstance.findAll()‎`

testInstance.findAll(test)

إيجاد جميع نسخ الاختبار المنحدرة والتي يُعيد فيها التابع test(testInstance)‎ القيمة true.

`testInstance.findAllByType()‎`

testInstance.findAllByType(type)

إيجاد جميع نسخ الاختبار المنحدرة التي تمتلك النوع type.

`testInstance.findAllByProps()‎`

testInstance.findAllByProps(props)

إيجاد جميع نسخ الاختبار المنحدرة التي تمتلك الخاصيّات props.

`testInstance.instance`

testInstance.instance

نسخة المكوّن المطابقة لنسخة الاختبار هذه. متوفّر فقط من أجل مكوّنات الأصناف، بسبب عدم امتلاك مكوّنات الدوال للنسخ. يُطابِق قيمة this بداخل المكوّن المُعطى.

`testInstance.type`

testInstance.type

نوع المكوّن المُطابِق لنسخة الاختبار هذه. على سبيل المثال يمتلك المكوّن ‎<Button />‎ النوع Button.

`testInstance.props`

testInstance.props

الخاصيّات المطابقة لنسخة الاختبار هذه. على سبيل المثال يمتلك المكوّن ‎<Button size="small" />‎ الخاصيّة ‎{size: 'small'}‎.

`testInstance.parent`

testInstance.parent

نسخة الاختبار الأب لنسخة الاختبار هذه.

`testInstance.children`

testInstance.children

نسخة الاختبار الابن لنسخة الاختبار هذه.

بعض الأفكار

بإمكانك تمرير الدالة createNodeMock إلى التابع TestRenderer.create كخيار، والذي يسمح بالمراجع المخصصة للمحاكاة. يقبل createNodeMock العنصر الحالي ويجب أن يُعيد كائن مرجع محاكي. يفيد هذا عند اختبار المكوّنات التي تعتمد على المراجع:

import TestRenderer from 'react-test-renderer';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.input = null;
  }
  componentDidMount() {
    this.input.focus();
  }
  render() {
    return <input type="text" ref={el => this.input = el} />
  }
}

let focused = false;
TestRenderer.create(
  <MyComponent />,
  {
    createNodeMock: (element) => {
      if (element.type === 'input') {
        // محاكاة دالة التركيز
        return {
          focus: () => {
            focused = true;
          }
        };
      }
      return null;
    }
  }
);
expect(focused).toBe(true);

انظر أيضًا

مصادر

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