مصير الاختبار

الاستيراد

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">Hello</p>
    </div>
  )
}

function SubComponent() {
  return (
    <p className="sub">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

• TestRenderer.create()
• TestRenderer.act()

TestRenderer instance

• ()testRenderer.toJSON
• ()testRenderer.toTree
• ()testRenderer.update
• ()testRenderer.unmount
• ()testRenderer.getInstance
• testRenderer.root

TestInstance

• ()testInstance.find
• ()testInstance.findByType
• ()testInstance.findByProps
• ()testInstance.findAll
• ()testInstance.findAllByType
• ()testInstance.findAllByProps
• testInstance.instance
• testInstance.type
• testInstance.props
• testInstance.parent
• testInstance.children

مرجع

()TestRenderer.create

TestRenderer.create(element, options);

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

TestRenderer.act()

TestRenderer.act(callback);

مشابهه ل act(), TestRenderer.act تعد المكون للتأكيدات. استخدم هذه النسخة من act() ل TestRenderer.create و testRenderer.update.

import {create, act} from 'react-test-renderer';
import App from './app.js'; // The component being tested

// render the component
let root; 
act(() => {
  root = create(<App value={1}/>)
});

// make assertions on root 
expect(root.toJSON()).toMatchSnapshot();

// update with some different props
act(() => {
  root.update(<App value={2}/>);
})

// make assertions on 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'} as props.

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') {
        // mock a focus function
        return {
          focus: () => {
            focused = true;
          }
        };
      }
      return null;
    }
  }
);
expect(focused).toBe(true);