اختبار Enzyme لتطبيق React: البحث عن العناصر.

عند التعامل مع استيراد expect واستخدامه في الاختبارات، يبدو أن الخطأ الذي تواجهه يرجع إلى استخدامك لمراجعة الأمر بطريقة خاطئة. بدلاً من استخدام expect المستورد مباشرة من مكتبة expect، يجب عليك استخدامه من chai مثلما هو مذكور في الوثائق التي قمت بالرجوع إليها.

لحل هذه المشكلة، يمكنك تعديل اختبارك ليستخدم expect من chai بالشكل التالي:

javascriptCopy code
import OffCanvasMenu from '../index';
import { Link } from 'react-router';

import { expect } from 'chai'; // تغيير المكتبة هنا
import { shallow, mount } from 'enzyme';
import sinon from 'sinon';
import React from 'react';

describe('', () => {
  it('contains 5  components', () => {
    const wrapper = shallow(<OffCanvasMenu />);
    expect(wrapper.find(Link)).to.have.length(5); // تم استبدال  بـ Link
  });
});

باستخدام هذا التعديل، يجب أن تتمكن من تشغيل اختبارك بنجاح دون أي أخطاء.

من الواضح أنك تستخدم Enzyme لاختبار تطبيق React الخاص بك. Enzyme هي مكتبة تساعد في اختبار واجهة المستخدم لتطبيقات React بطريقة سهلة وفعالة.

في اختبارك، أنت تستخدم shallow لإنشاء تمثيل سطحي لـ ، وتقوم بالبحث عن components داخله باستخدام wrapper.find(Link)، ثم تقوم بالتحقق مما إذا كان هناك 5 منها باستخدام .to.have.length(5).

الخطأ الذي تواجهه يحدث عندما تحاول استخدام خاصية have من expect، والتي لا تكون معرفة في هذا السياق. بدلاً من ذلك، يجب عليك استخدام توقعات Chai (expect من chai) لإجراء التحققات. تأكد من تحديث استيرادك لـ expect إلى import { expect } from 'chai'; كما أشرت في الرد السابق.

بعد التعديلات، يجب أن يتم تشغيل اختبارك بنجاح دون أي أخطاء.