requestAnimationFrame warnings on tests since React 16

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

Start a project create-react-app project
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

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",
  },
}

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!

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.

@lukerollans

@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).

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

Ah, no problem!

x-ref: #3200

@Timer

@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.

@barraponto

@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! 😄

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.

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.

@holman

@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).

@jameslockwood

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

fix requestAnimationFrame error, also added Gift component test

@unutoiul

@unutoiul probably not the place for such questions but for making API calls, or dealing with side effects, you would want redux-thunk (Dan's project :p), or redux-sage. There's a lot of options tbh.

@unutoiul

Sadly @unutoiul solution does not work for me :(. The only difference is i'm using react-scripts-ts - TypeScript.
When i had only polyfill in setupTests.ts it worked, but after i added Enzyme and separated polyfill to a new file i cannot get this to work:

tempPolyfill.ts

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

export default raf;

setupTests.ts

import raf from 'tempPolyfill';
import Enzyme, { shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

// Make Enzyme functions available in all test files without importing
global.shallow = shallow;

Any clues?

It’s not an error. It is a warning. If you use Create React App, you can safely ignore it and nothing will happen.

Except it exits with a non-zero exit code.

Can you provide a minimal example demonstrating this please? That sounds like a bug to me. It’s just a console.error() call so I don’t see why it would be a non-zero exit.

(If you configured your tests to fail on console.error then of course it would be a non-zero code, but configuring them as such would be your decision, not our default.)

I have recently found the CI=true option and it's now exiting correctly. Thanks.

@gaearon

Looking forward to the fix for this, but no pressure. Hope you're feeling better @gaearon.

I think we'll fix this by updating to Jest version that already has a polyfill.
Or maybe we'll copy it over. I'll try to get it done today.

Should be fixed in react-scripts@1.0.15.

https://github.com/facebookincubator/create-react-app/releases/tag/v1.0.15

it's possible when you don't want to work with older browser just turn off the warnings and errors on test ? or like android apps to specify the min. version supported ? or technically is not good idea? I think the idea to add polyfills when you dont' really need add more code to the build file ?
my build file have 1.6 Megabytes, i don't know why is so big

@dnaploszek

@dnaploszek

Not worked for me with latest Create React App

This is my solution:

    "@types/enzyme": "^3.1.4",
    "@types/enzyme-adapter-react-16": "^1.0.1",
    "@types/jest": "^21.1.6",

setupTests.ts

import 'raf/polyfill';

// Temporary hack to suppress error
// https://github.com/facebookincubator/create-react-app/issues/3199
window.requestAnimationFrame = function (callback) {
  setTimeout(callback, 0);
  return 0;
};

import { configure } from 'enzyme';
import * as Adapter from 'enzyme-adapter-react-16';

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

This issue is starting to get noisy with potentially incorrect advice so I'm locking this. If you experience problems please file a new issue.

Note that as of react-scripts@1.0.15 you shouldn't see this warning in tests. You would see it in older browsers (such as IE10) though. If you support those old browsers, you should add import 'raf/polyfill' as the first line of your src/index.js.

Navigation Menu

Repository navigation

requestAnimationFrame warnings on tests since React 16 #3199

Is this a bug report?

Which terms did you search for in User Guide?

Steps to Reproduce

Expected Behavior

Actual Behavior

13 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

requestAnimationFrame warnings on tests since React 16 #3199

Description

Is this a bug report?

Which terms did you search for in User Guide?

Steps to Reproduce

Expected Behavior

Actual Behavior

Activity

barraponto commented on Sep 27, 2017

Timer commented on Sep 27, 2017

lukerollans commented on Sep 27, 2017

Timer commented on Sep 27, 2017

lukerollans commented on Sep 27, 2017

Timer commented on Sep 27, 2017

Timer commented on Sep 27, 2017

barraponto commented on Sep 27, 2017

Timer commented on Sep 27, 2017

holman commented on Sep 27, 2017

gaearon commented on Sep 27, 2017

jameslockwood commented on Sep 28, 2017

holman commented on Sep 28, 2017

13 remaining items

JamesTheHacker commented on Oct 17, 2017

dnaploszek commented on Oct 18, 2017

offero commented on Oct 21, 2017

gaearon commented on Oct 21, 2017

gaearon commented on Oct 21, 2017

offero commented on Oct 21, 2017

danyalaytekin commented on Oct 26, 2017

gaearon commented on Oct 26, 2017

gaearon commented on Oct 30, 2017

webmobiles commented on Nov 15, 2017

Arelav commented on Nov 16, 2017

gaearon commented on Nov 17, 2017

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions