Вопрос:

Ошибка 'requestAnimationFrame` в Jest-тестах

reactjs jestjs react-dom

8242 просмотра

8 ответа

12950 Репутация автора

Получил эту ошибку после обновления до React при запуске юнит-тестов Jest:

Реакция зависит от requestAnimationFrame. Убедитесь, что вы загружаете полифилл в старых браузерах.

Как мне это исправить?

Я использую Jest 18.1.0.

Автор: Yangshun Tay Источник Размещён: 25.04.2017 07:17

Ответы (8)


-1 плюса

12950 Репутация автора

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

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

Автор: Yangshun Tay Размещён: 25.04.2017 10:16

33 плюса

1081 Репутация автора

Решение

Найден обходной путь!

шаги:

  1. Создать файл __mocks__/react.js
  2. Добавьте следующее в __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;

  1. Запусти шутку!

Как отмечено в комментариях к коду

Это решение от https://github.com/facebook/react/issues/9102#issuecomment-283873039

Автор: Atul Размещён: 13.05.2017 06:52

9 плюса

788 Репутация автора

Если вам просто нужно заполнить его для тестирования, тогда вам на самом деле не нужно регулирование.

Создайте новый файл с этим кодом:

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

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

Автор: sbaechler Размещён: 15.08.2017 08:20

33 плюса

589 Репутация автора

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

  1. устанавливать raf

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

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

'setupFiles': ['raf/polyfill']

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

Автор: Soska Размещён: 09.10.2017 11:54

3 плюса

3735 Репутация автора

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

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

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

Автор: smfoote Размещён: 24.10.2017 09:29

1 плюс

1381 Репутация автора

Еще одно рабочее решение!

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

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

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

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

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

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 включен . Кроме того, если ваши shim.jsи setup.jsфайлы не находятся в том же каталоге jest.config.js, что и ваш , измените путь соответствующим образом.

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

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

Автор: Ruto Collins Размещён: 03.11.2017 01:14

0 плюса

1120 Репутация автора

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

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

Автор: Kevin Li Размещён: 07.02.2018 03:38

1 плюс

13356 Репутация автора

Вот реалистичный способ смоделировать 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, пока не достигнет установленного вами максимального истекшего времени. Это происходит мгновенно, поэтому вам не нужно останавливать это.

Автор: inorganik Размещён: 19.02.2019 07:45
Вопросы из категории :
32x32