Jest: requestAnimationFrame تحذير مع React 16

يرجى الاطلاع على هذه المشكلة: https://github.com/facebook/jest/issues/1644

أعتقد أن هذا مختلف من الناحية النوعية لأن React Fibre out-of-the-box تتوقع الآن أن يكون RAF متاحًا. أنا لا أستخدم RAF على الإطلاق في الكود الخاص بي قيد الاختبار - التحذير يأتي من React نفسها.

cpojeraaronabramov هل يجب أن نقدم

كما سبق - أتلقى نفس التحذيرات عبر مجموعات الاختبار الخاصة بي. إذا كان الجواب يوفر ذلك polyfill الخاص بنا في بيئة الاختبار ، فليكن ذلك ... لكنني لست متأكدًا من كيفية القيام بذلك لجميع حالات اختبار المكون الخاص بي. هل من نصائح هناك؟

نعم ، دعنا نضيف واحدًا إلى بيئة jsdom الخاصة بنا.

هل يمكننا إعادة فتح هذه المشكلة لتتبع ذلك؟

mbifulco تمكنت من setupFiles في تكوين jest:

shim.js :

global.requestAnimationFrame = (callback) => {
    setTimeout(callback, 0);
};
````

**jest config json**:
```json
"setupFiles": ["<rootDir>/path/to/shim.js", "<rootDir>/path/to/setup.js"]

يجب أن يكون shim setup.js في المثال أعلاه). إذا تم استيراد أي تبعيات قبل تحميل الرقاقة ، فستظل تتلقى التحذير عند إجراء الاختبارات.

يتم استخدام الملف الثاني setup.js لتهيئة محول التفاعل:

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

الإصدارات: jest 21.2.0 ، رد فعل 16.0.0

جميل ، شكرًا لك @ jameslockwood - سأعطي هذه اللقطة.

هل ينبغي لنا تضمين polyfill مناسب ، أم فقط global.requestAnimationFrame = callback => setTimeout(callback, 0); ؟

أعتقد أننا يجب أن نختار أي شيء يوصي به فريق React الآن.

للاقتباس من المدونة https://facebook.github.io/react/blog/2017/09/26/react-v16.0.html

تعتمد React أيضًا على requestAnimationFrame (حتى في بيئات الاختبار). الرقاقة البسيطة لبيئات الاختبار ستكون:

global.requestAnimationFrame = function(callback) { setTimeout(callback, 0); };

آه ، لا يمكنني استخدام "setupFiles" في تكوين jest ، لأنني في بيئة إنشاء تطبيق تفاعل لم يتم إخراجها بعد. يبدو أنني يجب أن أراقب هذه المشكلة في تطبيق create-response-app .

yarn test v1.0.1
$ react-scripts test --env=jsdom --coverage
Out of the box, Create React App only supports overriding these Jest options:

  • collectCoverageFrom
  • coverageReporters
  • coverageThreshold
  • snapshotSerializers.

These options in your package.json Jest configuration are not currently supported by Create React App:

  • setupFiles

If you wish to override other Jest options, you need to eject from the default setup. You can do so by running npm run eject but remember that this is a one-way operation. You may also file an issue with Create React App to discuss supporting more options out of the box.

error Command failed with exit code 1.

تضمين التغريدة

يدعم إنشاء تطبيق React إعداد الاختبار ، ما عليك سوى إنشاء ملف باسم src/setupTests.js وإضافة polyfill إليه ، على سبيل المثال:

global.requestAnimationFrame = function(callback) {
  setTimeout(callback, 0);
};

إن مجرد تضمينه في setupTests.js لا يصلح لي ، ولكن إنشاء ملف جديد باستخدام polyfill واستيراده في الجزء العلوي من setupTests.js يفعل ذلك. كما هو مذكور بواسطة jameslockwood هنا:

https://github.com/facebookincubator/create-react-app/issues/3199#issuecomment -332842582

لأي شخص يبحث عن حل مؤقت كامل ، يبدو src/setupTests.js هكذا

// TODO: Remove this `raf` polyfill once the below issue is sorted
// https://github.com/facebookincubator/create-react-app/issues/3199#issuecomment-332842582
import raf from './tempPolyfills'

import Enzyme  from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

و src/tempPolyfills.js

const raf = global.requestAnimationFrame = (cb) => {
  setTimeout(cb, 0)
}

export default raf

jameslockwood هل تعمل مع تطبيق إنشاء رد فعل ؟ 😄

لقد أضفت خطوط polyfill:

global.requestAnimationFrame = function (callback) {
  setTimeout(callback, 0)
}

ولكن كيف يتم تعطيل التحذير؟

أين قمت بإضافة خطوط polyfillliuchong ؟
إذا أضفته بشكل صحيح ، يجب أن يختفي التحذير تلقائيًا.

نظرًا لأنني غير قادر على استخدام jest config json (بسبب عدم رفض إنشاء تطبيق React) لإتاحة polyfill في كل ملفات اختبار ، فقد أضفته في ملف باسم shim.js ودائمًا require it في كل اختبار باستخدام هذا الخط:

require("../shim.js");

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

لقد جربت للتو طريقة طلب ("../ shim.js") وقمت بإضافتها مباشرة إلى Xxx.test.tsx ، التحذير لا يزال موجودًا ، على الرغم من اجتياز الاختبارات

(يبدو أن requestAnimationFrame لا يؤثر على اختباراتي في الوقت الحالي ، لكن التحذير مزعج: joy_cat:).

يمكنك تثبيت 21.3.0-beta.2 من jest (أو فقط jest-environment-jsdom ) لإخراج polyfill من الصندوق

SimenB شكرا ، الإصدار @ 21.3.0-beta.2 تم إصلاحه! : +1:

يبدو أن تثبيت jest-environment-jsdom لا يفعل شيئًا لهذا التحذير. هل أحتاج إلى تحديث تهيئة jest على الإطلاق؟ شيء آخر غير "testEnvironment": "jsdom" ؟

تأكد من تثبيت الإصدار التجريبي. لم يتم وضع علامة عليه كـ latest

ما هو الإصدار التجريبي؟

jest@test ، 21.3.0-beta.2 أو شيء من هذا القبيل

متى يجب أن نتوقع نشر 21.3.0 ؟

تم نشره كإصدار تجريبي. تثبيت jest@test

SimenB يعمل بشكل جيد بالنسبة لي ، شكرا!

liuchong أنا أستخدم typescript أيضًا ، ووجدت أنه يجب تشغيل الرقاقة قبل محول enzyme ، ثم ستختفي التحذيرات.

  "setupFiles": [
    "<rootDir>/test/shimSetup.ts",
    "<rootDir>/test/enzymeSetup.ts"
  ]

وفي shimSetup.ts لدي

(global as any).requestAnimationFrame = (callback: any) => {
    setTimeout(callback, 0);
};