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

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
(تحديث)
 
(4 مراجعات متوسطة بواسطة 3 مستخدمين غير معروضة)
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE:مصير الاختبار (Test Renderer)}}</noinclude>
+
<noinclude>{{DISPLAYTITLE:مصير الاختبار (Test Renderer) في React}}</noinclude>
 
 
 
== الاستيراد ==
 
== الاستيراد ==
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
سطر 11: سطر 10:
 
تُزوّدنا هذه الحزمة بمُصيِّر React يُمكِن استخدامه لتصيير مكوّنات React إلى كائنات JavaScript نقيّة بدون الاعتماد على DOM أو بيئة الهاتف المحمول الأصليّة.
 
تُزوّدنا هذه الحزمة بمُصيِّر React يُمكِن استخدامه لتصيير مكوّنات React إلى كائنات JavaScript نقيّة بدون الاعتماد على DOM أو بيئة الهاتف المحمول الأصليّة.
  
تُسهِّل هذه الحزمة بشكل أساسي من أخذ صورة حول التسلسل الهرمي للمكوّنات (مشابه لشجرة DOM) والتي يُصيّرها React DOM أو React Native بدون استخدام المتصفح أو jsdom.
+
تُسهِّل هذه الحزمة بشكل أساسي من أخذ صورة حول التسلسل الهرمي للمكوّنات (مشابه لشجرة DOM) والتي يُصيّرها React DOM أو React Native بدون استخدام المتصفح أو [https://github.com/tmpvar/jsdom jsdom].
  
 
مثال:<syntaxhighlight lang="javascript">
 
مثال:<syntaxhighlight lang="javascript">
سطر 29: سطر 28:
 
//  children: [ 'Facebook' ] }
 
//  children: [ 'Facebook' ] }
  
</syntaxhighlight>نستطيع استخدام ميزة الاختبار بالتقاط الصورة الموجودة في Jest لحفظ نسخة عن شجرة JSON بشكل تلقائي إلى ملف والتحقق في اختباراتك من أنّها لم تتغيّر. تعلّم المزيد حول ذلك.
+
</syntaxhighlight>نستطيع استخدام ميزة الاختبار بالتقاط الصورة الموجودة في Jest لحفظ نسخة عن شجرة JSON بشكل تلقائي إلى ملف والتحقق في اختباراتك من أنّها لم تتغيّر. [http://facebook.github.io/jest/blog/2016/07/27/jest-14.html تعلّم المزيد حول ذلك].
  
 
بإمكانك أيضًا التنقل في الناتج لإيجاد عقد محددة:<syntaxhighlight lang="javascript">
 
بإمكانك أيضًا التنقل في الناتج لإيجاد عقد محددة:<syntaxhighlight lang="javascript">
سطر 62: سطر 61:
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
 
TestRenderer.create(element, options);
 
TestRenderer.create(element, options);
</syntaxhighlight>إنشاء نسخة من <code>TestRenderer</code> مع عنصر React المُمرَّر. لا يستخدم هذا التابع DOM الحقيقي ولكنّه يُصيِّر بشكل كامل شجرة المكوّنات في الذاكرة. تملك النسخة المُعادة التوابع والخاصيّات التالية.
+
</syntaxhighlight>إنشاء نسخة من <code>TestRenderer</code> مع عنصر React المُمرَّر. لا يستخدم هذا التابع DOM الحقيقي ولكنّه يُصيِّر بشكل كامل شجرة المكوّنات في الذاكرة. تملك النسخة المُعادة التوابع والخاصيّات التالية. وتعيد نسخة من الصنف  <code>TestRendere</code>.
 +
 
 +
=== <code>TestRenderer.act()‎</code> ===
 +
<syntaxhighlight lang="javascript">
 +
TestRenderer.act(callback);
 +
 
 +
</syntaxhighlight>على غرار الفعل <code>[[React/test utils#act.28.29.E2.80.8E|act()]]‎</code> من<code>react-dom/test-utils</code> ، تحضّر <code>TestRenderer.act</code> المكون لإجراء اختبار عليه. استخدم هذا الإصدار من  <code>act()‎</code>  لتغليف استدعاءات <code>TestRenderer.create</code> و <code>testRenderer.update</code>.<syntaxhighlight lang="javascript">
 +
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();
 +
 +
</syntaxhighlight>
 
=== <code>testRenderer.toJSON()‎</code> ===
 
=== <code>testRenderer.toJSON()‎</code> ===
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
 
testRenderer.toJSON()
 
testRenderer.toJSON()
</syntaxhighlight>يُعيد كائن يُمثِّل الشجرة المُصيَّرة. تحتوي هذه الشجرة على عُقَد خاصّة بالمنصّة مثل ‎<code><nowiki><div></nowiki></code>‎ أو ‎<code><View></code>‎ وخاصيّاتها، ولكنّه لا يحتوي على مكوّنات مكتوبة من قبل المستخدم. يُفيد هذا لأجل اختبار اللقطات (snapshot testing).
+
</syntaxhighlight>يُعيد كائن يُمثِّل الشجرة المُصيَّرة. تحتوي هذه الشجرة على عُقَد خاصّة بالمنصّة مثل ‎<code><nowiki><div></nowiki></code>‎ أو ‎<code><View></code>‎ وخاصيّاتها، ولكنّه لا يحتوي على مكوّنات مكتوبة من قبل المستخدم. يُفيد هذا لأجل [http://facebook.github.io/jest/docs/en/snapshot-testing.html#snapshot-testing-with-jest اختبار اللقطات (snapshot testing)].
  
 
=== <code>testRenderer.toTree()‎</code> ===
 
=== <code>testRenderer.toTree()‎</code> ===
سطر 135: سطر 160:
  
 
=== <code>testInstance.props</code> ===
 
=== <code>testInstance.props</code> ===
الخاصيّات المطابقة لنسخة الاختبار هذه. على سبيل المثال يمتلك المكوّن ‎<code><Button size="small" /></code>‎ الخاصيّة <code>‎{size: 'small'}</code>‎.
+
<syntaxhighlight lang="javascript">
 +
testInstance.props
 +
 
 +
</syntaxhighlight>الخاصيّات المطابقة لنسخة الاختبار هذه. على سبيل المثال يمتلك المكوّن ‎<code><Button size="small" /></code>‎ الخاصيّة <code>‎{size: 'small'}</code>‎.
  
 
=== <code>testInstance.parent</code> ===
 
=== <code>testInstance.parent</code> ===
سطر 148: سطر 176:
  
 
== بعض الأفكار ==
 
== بعض الأفكار ==
بإمكانك تمرير الدالة <code>createNodeMock</code> إلى التابع <code>TestRenderer.create</code> كخيار، والذي يسمح بالمراجع المخصصة للمحاكاة. يقبل <code>createNodeMock</code> العنصر الحالي ويجب أن يُعيد كائن مرجع محاكي. يفيد هذا عند اختبار المكوّنات التي تعتمد على المراجع:
+
بإمكانك تمرير الدالة <code>createNodeMock</code> إلى التابع <code>TestRenderer.create</code> كخيار، والذي يسمح بالمراجع المخصصة للمحاكاة. يقبل <code>createNodeMock</code> العنصر الحالي ويجب أن يُعيد كائن مرجع محاكي. يفيد هذا عند اختبار المكوّنات التي تعتمد على المراجع:<syntaxhighlight lang="javascript">
 +
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);
 +
 
 +
       
 +
 
 +
</syntaxhighlight>
 +
 
 +
== انظر أيضًا ==
 +
* [[React/react api|واجهة برمجة التطبيق (API) ذات المستوى الأعلى في React]]
 +
* [[React/react component|الصنف React.Component]]
 +
* [[React/react dom|الكائن ReactDOM]]
 +
* [[React/react dom server|الكائن ReactDOMServer]]
 +
* [[React/dom elements|عناصر DOM]]
 +
* [[React/events|الأحداث المصطنعة (Synthetic Events)]]
 +
* [[React/test utils|أدوات الاختبار]]
 +
* [[React/shallow renderer|التصيير السطحي (Shallow Rendering)]]
 +
* [[React/javascript environment requirements|متطلبات بيئة JavaScript]]
 +
==مصادر==
 +
*[https://reactjs.org/docs/test-renderer.html صفحة مصير الاختبار في توثيق React الرسمي].
 +
[[تصنيف:React]]
 +
[[تصنيف:React API Reference]]

المراجعة الحالية بتاريخ 21:18، 5 نوفمبر 2020

الاستيراد

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);

انظر أيضًا

مصادر