Jest: requestAnimationFrame warning with React 16

Please see this issue: https://github.com/facebook/jest/issues/1644

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.

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

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?

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

Can we re-open this issue to track that?

@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**:
```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

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

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

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

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

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.

@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);
};

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:

https://github.com/facebookincubator/create-react-app/issues/3199#issuecomment-332842582

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

@jameslockwood Works with create-react-app ? 😄

I've added polyfill lines:

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

But how to disable the warning?

Where did you add the polyfill lines @liuchong ?
If you added it correctly, the warning should disappear automatically.

Since I am unable to use jest config json (due to unejected Create React App) to make the polyfill available on every test files, I added it in a file named shim.js and I always require it on every test by using this line:

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

@zainfathoni
Thanks, I added it in my "setupFiles". Besides, I'm using typescript

I've just tried the require("../shim.js") method and even directly added it into my Xxx.test.tsx, the warning still there, although the tests are passed

(seems the requestAnimationFrame does not affecting my tests for now, but the warning is noising :joy_cat: ).

You can install 21.3.0-beta.2 of jest (or just jest-environment-jsdom) to get the polyfill out of the box

@SimenB Thanks, the @21.3.0-beta.2 version fixed it! :+1:

@SimenB installing jest-environment-jsdom doesn't seem to do anything for this warning. Do I need to update jest config at all? Something other than "testEnvironment": "jsdom"?

Make sure to install the beta. It's not tagged as latest

what's the beta version?

jest@test, 21.3.0-beta.2 or something

When should we expect 21.3.0 to be published?

It's published as beta. Install jest@test

@SimenB Works fine for me, thanks!

@liuchong I'm using typescript too, and I found that the shim needs to be run before enzyme adapter, then the warnings will go away.

  "setupFiles": [
    "<rootDir>/test/shimSetup.ts",
    "<rootDir>/test/enzymeSetup.ts"
  ]

And in shimSetup.ts I have

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