Jest: Предупреждение requestAnimationFrame с помощью React 16

См. Эту проблему: https://github.com/facebook/jest/issues/1644

Я думаю, что это качественно иначе, потому что React Fiber теперь ожидает, что RAF будет доступен. Я вообще не использую RAF в своем тестируемом коде - предупреждение исходит от самого React.

@cpojer @aaronabramov, тогда стоит ли предоставлять полифил по умолчанию?

То же самое - я получаю одни и те же предупреждения во всех своих тестовых наборах. Если ответ, то предоставьте наш собственный полифил в тестовой среде, пусть будет так ... но я не уверен, как это сделать для _все_ тестовых примеров моих компонентов. Есть какие-нибудь советы?

Да, давайте добавим один в наш jsdom env.

Можем ли мы повторно открыть эту проблему, чтобы отследить это?

@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"]

Прокладка должна быть первым файлом в массиве setupFiles, если у вас есть какие-либо другие установочные файлы для загрузки (например, setup.js в приведенном выше примере). Если какие-либо зависимости импортируются до загрузки прокладки, вы все равно получите предупреждение при запуске тестов.

Второй файл setup.js используется для настройки адаптера реакции:

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

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

Версии: jest 21.2.0, react 16.0.0

Прекрасно, спасибо @jameslockwood - я

Должны ли мы включать правильный полифилл или просто 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, которое еще не было извлечено. Похоже, я должен следить за этой проблемой в приложении create-react-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.

@mbifulco

Приложение Create React поддерживает настройку теста, просто создайте файл с именем src/setupTests.js и добавьте в него свой полифилл, например:

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

Просто включение его в setupTests.js не помогло мне решить эту проблему, но создание нового файла с полифилом и его импорт в начало 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 Работает с приложением create- react -app ? 😄

Я добавил полифиллы:

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

Но как отключить предупреждение?

Куда вы добавили строки полифила @liuchong ?
Если вы добавили его правильно, предупреждение должно исчезнуть автоматически.

Поскольку я не могу использовать jest config json (из-за отсутствия приложения Create React), чтобы сделать полифилл доступным для всех тестовых файлов, я добавил его в файл с именем shim.js и всегда require it в каждом тесте, используя эту строку:

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

@zainfathoni
Спасибо, я добавил его в свои "setupFiles". Кроме того, я использую машинописный текст

Я только что попробовал метод require ("../ shim.js") и даже напрямую добавил его в свой Xxx.test.tsx, предупреждение все еще там, хотя тесты пройдены

(похоже, что requestAnimationFrame пока не влияет на мои тесты, но предупреждение шумит: joy_cat:).

Вы можете установить 21.3.0-beta.2 jest (или просто jest-environment-jsdom ), чтобы получить полифилл прямо из коробки.

@SimenB Спасибо, версия @ 21.3.0-beta.2 исправила это! : +1:

@SimenB установка 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);
};