requestAnimationFrame warning with React 16

[taion]

Do you want to request a feature or report a bug?
Bug-ish

What is the current behavior?
Warning emitted:

  ● Console

    console.error node_modules/fbjs/lib/warning.js:33
      Warning: React depends on requestAnimationFrame. Make sure that you load a polyfill in older browsers. http://fb.me/react-polyfills

If the current behavior is a bug, please provide the steps to reproduce and either a repl.it demo through https://repl.it/languages/jest or a minimal repository on GitHub that we can yarn install and yarn test.
Run any Jest tests with React 16

What is the expected behavior?
No warning

Please provide your exact Jest configuration and mention your Jest, node, yarn/npm version and operating system.
Jest v21.2.0
jest-environment-jsdom-11.0.0 v20.0.9

This would be resolved by jsdom/jsdom#1963 upstream. It's just sort of an annoying warning, and I don't want to define a custom environment just to stub polyfill rAF.

I think this is trackable here given that the React docs recommend Jest: https://facebook.github.io/react/docs/test-utils.html, and that it'd be ideal for Jest tests to not emit warnings when used with the latest React release.

[thymikee]

Please see this issue: #1644

[taion]

I think this is qualitatively different because React Fiber out-of-the-box now expects RAF to be available. I'm not using RAF at all in my code under test – the warning comes from React itself.

[thymikee]

@cpojer @aaronabramov should we provide a default polyfill then?

[mbifulco]

Ditto - I'm getting the same warnings across my test suites. If the answer it so provide our own polyfill in the test environment, so be it... but I'm not sure how to do that for all my component test cases. Any tips there?

[cpojer]

Yeah, let's add one to our jsdom env.

[taion]

Can we re-open this issue to track that?

[jameslockwood]

@mbifulco I managed to get this working for all test cases by loading a simple shim before each spec, using the setupFiles property in the jest config:

shim.js:

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

jest config json:

"setupFiles": ["<rootDir>/path/to/shim.js", "<rootDir>/path/to/setup.js"]

The shim must be the first file in the setupFiles array if you have any other setup files to load (e.g. setup.js in the example above). If any dependencies are imported before the shim has loaded, then you'll still get the warning when running tests.

The second setup.js file is used to configure the react adapter:

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

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

Versions: jest 21.2.0, react 16.0.0

[mbifulco]

Beautiful, thank you @jameslockwood - I'll give that a shot.

[SimenB]

Should we include a proper polyfill, or just global.requestAnimationFrame = callback => setTimeout(callback, 0);?

[thymikee]

I think we should go with whatever React team recommends now.

[jameslockwood]

To quote the blog https://facebook.github.io/react/blog/2017/09/26/react-v16.0.html

React also depends on requestAnimationFrame (even in test environments). A simple shim for test environments would be:

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

[mbifulco]

Ah, I can't use "setupFiles" in jest config, because I'm in a create-react-app environment that hasn't ejected yet. Looks like I should be keeping an eye on this issue on 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.

[Timer]

@mbifulco

Create React App supports test setup, simply create a file named src/setupTests.js and add your polyfill to it, e.g.:

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

[sebastiangraef]

Just including it in setupTests.js didn't fix it for me, but creating a new file with the polyfill and importing that at the top of setupTests.js does it. Like mentioned by @jameslockwood over here:

facebook/create-react-app#3199 (comment)

[lukerollans]

For anyone looking for a complete, temporary workaround, my src/setupTests.js looks like this

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

and src/tempPolyfills.js

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

export default raf

[markozxuu]

@jameslockwood Works with create-react-app ? 😄

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.