React: يُرجع TestUtils.renderIntoDocument "فارغ" عند اجتياز مكون وظيفي صالح.

تم إنشاؤها على ١٠ أبريل ٢٠١٩  ·  4تعليقات  ·  مصدر: facebook/react

هل تريد طلب ميزة أو الإبلاغ عن خطأ ؟
أريد الإبلاغ عن خطأ.

ما هو السلوك الحالي؟
حاليًا عندما يتم تمرير مكون وظيفي صالح إلى TestUtils.renderIntoDocument ، فإنه يقوم بإرجاع قيمة خالية ولا يظهر أي خطأ.

تجريبي
تم إعادة إنتاج هذا السلوك في وضع الحماية: https://codesandbox.io/s/1zpvll4j24

تحقق من وحدة التحكم ، لمعرفة إخراج TestUtils.renderIntoDocument لمكونات العينة المعدة.

الحلول
الحل البديل الذي يرضي كلاً من SFC و FC هو تغليف المكون في الحاوية:

const FCCounter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <div>{count}</div>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
};

TestUtils.renderIntoDocument(
  <div>
    <FCCounter />
  </div>
);

ما هو السلوك المتوقع؟

  • لتقديم مكون وظيفي.
  • في أسوأ الأحوال - تقديم خطأ.

ما إصدارات React التي تأثرت بهذه المشكلة؟
إصدار رد الفعل: 16.8.6

Test Utils Question

ال 4 كومينتر

لا تحتوي المكونات الوظيفية على أي instances ، فماذا تتوقع

TestUtils.renderIntoDocument(<FCCounter/>)

لكي ترجع؟

أيضًا ، على نطاق واسع ، هل يمكنك شرح ما تحاول القيام به؟ يمكنك استخدام forwardRef / useImperativeHandle (https://reactjs.org/docs/hooks-reference.html#useimperativehandle) للوصول إلى "الأساليب" الداخلية ، لكنني أشعر بالفضول أنت تحاول الاختبار على الإطلاق.

بعد استدعاء TestUtils.renderIntoDocument باستخدام المكون الكلاسيكي ، تم تمكيني تمامًا للوصول إلى state ، props والتلاعب بالمكون باستخدام setState . لذا ، ما كنت أتوقع أن يعيده TestUtils.renderIntoDocument هو بعض العناصر التي تسمح لي باستخدام state و props و setState .

أحاول اختبار المكونات التي يتم تنفيذها كمكونات وظيفية. الهدف الرئيسي هو تغيير حالة المكون والتحقق مما إذا كانت الحالة المتغيرة تتطابق مع الحالة التي يتوقعها الاختبار.

في حالة الاختبار لدي شرط مسبق ، يجب اختبار هذه المكونات كما هي ولا يجب تغييرها لاحتواء الكود المخصص لأغراض الاختبار. لذا ، فإن تغيير المكون نفسه لاستخدام forwardRef/useImperativeHandle ليس خيارًا.

DeividasBakanas لا تحتوي مكونات دالة TestUtils.renderIntoDocument (في حالة مكونات الفئة).

مثل trueadm المذكور ، لا نوصي باختبار تفاصيل تنفيذ المكون نفسه ، واستخدام الخاصيات / الأحداث لتشغيل التحديثات ، والقيام بالتأكيدات على ناتج المكون. يمكنني أن أوصي بمكتبات مثل مكتبة التفاعل والاختبار https://github.com/kentcdodds/react-testing-library لجعل هذا أسهل قليلاً. كينت يكتب على نطاق واسع حول هذا الموضوع ، أوصي به.

إغلاق هذه المشكلة لأنها مسألة استخدام أكثر من كونها طلب خطأ / ميزة.

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات