`requestAnimationFrame` polyfill ошибка в тестах Jest

Ответ 1

Обнаружено обходное решение!

Шаги:

• Создайте файл __mocks__/react.js
• Добавьте следующее в __mocks__/react.js

const react = require('react');
// Resolution for requestAnimationFrame not supported in jest error :
// https://github.com/facebook/react/issues/9102#issuecomment-283873039
global.window = global;
window.addEventListener = () => {};
window.requestAnimationFrame = () => {
  throw new Error('requestAnimationFrame is not supported in Node');
};

module.exports = react;

Ответ 2

это сработало для меня:

• Установить raf

npm install --saveDev raf или yarn add -D raf

2. Добавьте polyfill к вашему setupFiles в конфигурацию jest в package.json следующим образом:

'setupFiles': ['raf/polyfill']

Примечание. Если у вас есть другие файлы настроек в этом массиве, вы можете сначала поставить raf/polyfill.

Ответ 3

Если вам просто нужно polyfill для тестов, то вам фактически не требуется дросселирование.

Создайте новый файл с помощью этого кода:

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

Добавьте этот файл в массив jest/setupFiles в package.json.

Ответ 4

Если вы используете create-реагировать-приложение, некоторые из этих решений не будут работать хорошо (или вообще, в случае setupFiles). Что хорошо работает, так это создание файла в src/setupTests.js и добавление туда вашего макета:

global.requestAnimationFrame = (cb) => { cb(); };

Вы также можете добавить другие глобальные localStorage (например, localStorage и navigator.serviceWorker).

Ответ 5

Другое рабочее решение!

Идея состоит в том, чтобы загрузить простую прокладку перед каждой спецификацией, используя свойство setupFiles в конфигурации jest.

Создайте файл shim.js (желательно в корневом каталоге) и введите в нем этот код:

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

Затем у вас может быть избыточный код, который будет отображаться во всех/большинстве ваших файлов, и вы хотите поместить их в один файл и запустить их перед каждой спецификацией, чтобы сделать это:

Создайте файл setup.js в корневом каталоге. Хорошим вариантом избыточного кода для D.R.Y является код конфигурации адаптера адаптивного фермента. Вставьте его здесь.

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

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

Теперь создайте файл jest.config.js, чтобы указать пути двух файлов

{
    module.exports = {
        "setupFiles": ["<rootDir>shim.js", "<rootDir>setup.js"]
    }
}

NB: Файл конфигурации jest принимает json, поэтому убедитесь, что json in. Кроме того, если ваши файлы shim.js и setup.js не находятся в том же каталоге, что и ваш jest.config.js, соответственно отрегулируйте путь.

Надеюсь, это поможет!

Кредит: https://github.com/facebook/jest/issues/4545

Ответ 6

Вот реалистичный способ макетировать requestAnimationFrame:

let time;
const maxTimeElapsed = 2000;

beforeEach(() => {
  time = 0;
  jest.spyOn(window, 'requestAnimationFrame').mockImplementation(cb => {
    time += 100;
    if (time < maxTimeElapsed) {
      return cb(time) as any;
    }
  });
});

в вашем тесте он неоднократно вызывает обратный вызов RAF, пока не достигнет установленного вами максимального истекшего времени. Это происходит мгновенно, поэтому вам не нужно останавливать это.

Ответ 7

Просто обновите свои реактивные react-scripts до версии 1.0.15 или выше. Это было официально исправлено после этой версии. Подробности смотрите в https://github.com/facebook/create-react-app/issues/3199

Поиск в комментариях gaearon commented on 31 Oct 2017

Ответ 8

Оказывается, это потому, что я обновил enzyme без обновления react и react-dom.

React 15.5 вызывает некоторые изъяны, из-за чего многие зависимые библиотеки также должны обновляться. Убедитесь, что вы обновляете react, react-dom и проверяете README этих зависимых пакетов для новых библиотек, которые вы должны установить. Например, Enzyme 2.8.2 теперь требует react-addons-test-utils в качестве зависимости.