requestAnimationFrame warnings on tests since React 16

[barraponto]

Is this a bug report?

Yes

Which terms did you search for in User Guide?

The issue is documented at https://facebook.github.io/react/docs/javascript-environment-requirements.html

Steps to Reproduce

1. Start a project create-react-app project
2. Try to run the template tests yarn test

Expected Behavior

I expected the testing to complete without warnings out-of-the-box (as it did pre-R16).

Actual Behavior

All tests pass, but prints message:

  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

[barraponto]

I know React 16 needs that polyfill, my point is that create-react-app could provide it by default, taking the burden out of its users shoulders. For instance, it could depend on the raf package and change the test script in package.json to

{
  "scripts": {
    "test": "react-scripts test --env=jsdom --setupTestFrameworkScriptFile=raf/polyfill",
  },
}

[Timer]

Great point!
We know we need to start providing a Map and Set polyfill by default now, but we want to figure out a better story for including the polyfills (so they're not included for React 15 bundles, etc).

More to come on this soon, but happy to discuss further if you have some ideas!

[lukerollans]

On the point of providing a Map and Set polyfill by default, my understanding is that babel-core loads said polyfill's automatically as per the babel-polyfill docs

Happy to be proven wrong, though.

[Timer]

@lukerollans I'm not sure what you're referring to, we do not depend on or include babel-polyfill by default.

Babel itself (babel-core) does not concern itself with polyfilling anything except some language features it uses itself (like Object.assign, via its _extends helper).

---

Polyfills wouldn't conflict with one another, so someone who uses babel-polyfill in their application wouldn't experience any bad side-effect (but you should never use the entirety of babel-polyfill or core-js).

[lukerollans]

I just double checked the source I linked to and I simply misread babel-node for babel-core, thanks for clearing it up!

[Timer]

Ah, no problem!

[Timer]

x-ref: #3200

[barraponto]

@Timer i meant specifically for testing. Map and Set are already supported in Node 0.12+, so I think we can leave this issue just for CRA default test setup.

[Timer]

@barraponto correct! but we target IE 9 and Map and Set are not available in IE <11, so we'll just kill two birds with one stone! 😄

[holman]

fwiw, I know the current idea mentioned in various docs is to put this in src/setupTests.js:

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

...but that doesn't seem to kill these warnings for me either after moving to 16.

[gaearon]

We'll figure something out soon. Sorry about that. This was the biggest release we ever did, there's also a new website we're launching today, and between all that there's a few kinks we still need to iron out.

[jameslockwood]

@holman FYI I had the same problem RE shim not working. The gotcha is that polyfill/shim needs to be in it's own file, and loaded before any dependencies. See jestjs/jest#4545 (comment).

[holman]

Nice! Yeah that fixed it for me. Thanks for the heads-up @jameslockwood.