كيفية اختيار نص العنصر في React + Enzyme

لا يوجد دعم مباشر لاختيار نص العنصر في React مع Enzyme، لكن يمكنك استخدام حلول بديلة. عند استخدام Enzyme مع React، تقدم Enzyme وظائف تساعد في اختبار العناصر والتأكد من سلوكها. لاستخراج نص العنصر، يمكنك استخدام text() و html() كما فعلت بالفعل، ولكن من الممكن أيضًا استخدام تقنيات أخرى.

أحد الحلول البسيطة هو استخدام render() لاختبار العنصر بصورة أدق. على سبيل المثال:

javascriptCopy code
expect(wrapper.find('.btn').render().text()).to.equal('OK');

باستخدام هذا النهج، سيتم استخدام المتغير wrapper لاختيار العنصر المناسب، ثم سيتم استدعاء render() للحصول على تمثيل HTML الكامل للعنصر، وأخيرًا سيتم استخدام text() للحصول على النص الفعلي للعنصر.

إذا كنت تفضل تجنب استخدام render()، يمكنك استخدام الطريقة التي اقترحتها بالفعل باستخدام html() واستخدام تعبيرات القوالب (Regex) للتحقق من النص. ومع ذلك، يفضل استخدام الحلول التي تجنب الاعتماد على تعبيرات القوالب في الاختبارات إذا كان ذلك ممكنًا.

عند استخدام Enzyme مع React لاختبار العناصر، يمكنك أيضًا استخدام العديد من الوظائف الأخرى للتحقق من خصائص وسلوك العناصر. على سبيل المثال، يمكنك استخدام props() للتحقق من الخصائص الممررة إلى العنصر، أو state() للتحقق من الحالة الداخلية للعنصر.

إذا كنت ترغب في الحصول على النص الخام للعنصر دون العنوان أو السمات، يمكنك استخدام خاصية text() بدلاً من html()، حيث تُعيد text() النص فقط دون العنوان أو السمات. على سبيل المثال:

javascriptCopy code
expect(wrapper.find('.btn').text()).to.equal('OK');

هذا يجب أن يعمل بشكل صحيح للاختبار المذكور، حيث ستحصل على النص “OK” دون أي عناصر HTML أخرى.

باستخدام هذه الوظائف المدمجة في Enzyme، يمكنك بناء اختبارات قوية لتأكيد سلوك وأداء عناصر React الخاصة بك.