Warning: React depends on requestAnimationFrame. Make sure that you load a polyfill in older browsers. http://fb.me/react-polyfills

Khrystyna Skvarok
1 min readOct 26, 2017

--

If you bootstrapped your project with create-react-app and you don’t want to eject it as you are very okay with current settings and only this one specific warning annoys you while running tests, consider doing next:

  1. Create file in src folder “src/tempPolyfills.js”:
const raf = global.requestAnimationFrame = (cb) => {
setTimeout(cb, 0);
}

export default raf;

2. If you don’t have, create another file in the same folder “src/setupTests.js”. You will anyway need it if you want to use Enzyme with React 16 (check Enzyme installation guide for details). This file is picked up automatically by configuration of create-react-app:

// 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() });

Wo-ho! Nasty warning will go away! Many many thanks to lukerollans and his solution at open issue here 🎉🎉🎉 This bug is described at create-react-app github page. Fingers crossed it will be closed soon and we can get rid off this workaround.

Thank you for staying with me until these words ❤ I like to chat, so looking forward to hearing from you. Happy Jest testing!

--

--

Khrystyna Skvarok

Product manager, Software engineer, Human being 👩‍💻🤓 Amsterdam — Ukraine 🌾 Do good, be kind, think open-minded 🌱 Read books 🌸 Help others 🌿