ورقة غش أداة اختبار React Enzyme

Enzyme هي أداة اختبار جافا سكريبت مصممة لـ React تمكنك من تأكيد ومناورة واجتياز عناصر مخرجات مكونات React بسهولة.

الإعداد مع Jest و React 16

// test/setup.js
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

أوضاع التصيير (Rendering Modes)

التصيير السطحي (shallow)

تصيير المكون الحالي فقط بعمق مستوى واحد دون تصيير المكونات الفرعية:

import { shallow } from 'enzyme';

const wrapper = shallow(<MyComponent title="Hello" />);
expect(wrapper.find('h1').text()).toEqual('Hello');

التثبيت الكامل في DOM (mount)

تصيير المكون مع كافة العناصر الفرعية داخل مستند jsdom افتراضي:

import { mount } from 'enzyme';

const wrapper = mount(<MyComponent />);
expect(wrapper.find('.child-node')).toHaveLength(2);
wrapper.unmount();

اجتياز DOM والبحث (DOM Traversal & Finders)

wrapper.find('button')           // البحث بمحدد CSS أو بنوع المكون
wrapper.filter('.active')        // تصفية التحديد الحالي
wrapper.not('.hidden')           // تصفية عكسية
wrapper.children()               // الحصول على العناصر الفرعية
wrapper.parent()                 // الحصول على العنصر الأب المباشر
wrapper.closest('form')          // البحث عن أقرب عنصر سلف
wrapper.first()                  // العنصر المطابق الأول
wrapper.last()                   // العنصر المطابق الأخير
wrapper.at(0)                    // العنصر المطابق ذو الترتيب n

محاكاة الأحداث (Simulating Events)

// حدث النقر
wrapper.find('button').simulate('click');

// حدث التغيير مع كائن حدث وهمي
wrapper.find('input').simulate('change', {
  target: { value: 'New text' }
});

// حدث الضغط على المفتاح
wrapper.find('input').simulate('keydown', { keyCode: 13 });

الحالة والخصائص والسياق (State, Props & Context)

// Read values
wrapper.state('loading');        // قراءة قيمة مفتاح الحالة
wrapper.prop('disabled');        // قراءة قيمة الخاصية
wrapper.props();                 // كائن الخصائص بالكامل

// Mutate values in tests
wrapper.setState({ count: 5 });  // تعديل الحالة أثناء الاختبارات
wrapper.setProps({ active: true });

// Access underlying React instance
const instance = wrapper.instance(); // الوصول إلى كائن نسخة React الأساسية

التوكيدات وفحص العناصر (Assertions & Element Checks)

expect(wrapper.exists()).toBe(true);
expect(wrapper.hasClass('btn-primary')).toBe(true);
expect(wrapper.contains(<span className="badge">New</span>)).toBe(true);
expect(wrapper.text()).toContain('Welcome');
expect(wrapper.html()).toContain('class="active"');