React 16 JavaScript Environment.md

This Page Has Moved To:

https://reactjs.org/docs/javascript-environment-requirements.html

if you're using jest, it's best to install raf and then in your jest config:

"setupFiles": [
      "raf/polyfill"
    ]

Note that this will be moved to official React docs soon - see checklist on react/react#8854

What about just adding <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>?

I just updated a small app to React 16 and this is the polyfill file I created for it and this is where I reference it from.

I'm not sure if this is the best approach - hope it helps someone.

@hipertracker I think that the disadvantage of that is that it will load all the polyfills that are missing for that browser instead of just the ones that you need. From a simplicity point of view it's a great solution and I think that will work. 💯

@guyellis thanks for the code snippet. I also got the warning in my unit tests with create-react-app and followed this thread to update my package.json test script

react/create-react-app#3199

@capaj, thanks, raf/polyfill in Jest setupFiles was exactly what I was looking for. Nothing else worked for me with React16+Jest+Enzyme.
BTW, seems like it has to go first in the array. E.g. I also have jest.setup.js configuring Enzyme adapter for React16, and it only works when raf/polyfill is on the first place:

setupFiles: [
'raf/polyfill',
'<rootDir>/jest.setup.js',
],

Confirming what @dubbha said. Needs to go in the first place.

Any chance you can just bake this into React 16? Why do we need to add it to application code? Who wouldn't want to have access to it?

@guyellis I found some site has polyfill like this:
<script defer>window.Map||document.write('<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>')</script>
How about this solution.

I am using create-react-app and trying to implement this but it does not support passing jest.setupFiles in the package.json. I've been going through the jest docs but haven't found anything yet on a CLI flag for passing this information to react-scripts test. Has anyone figured this out?

@rockchalkwushock Have you tried putting the config in src/setupTests.js?
doc: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#initializing-test-environment

@pedro-mass

Thanks! Now I understand that --setupTestFrameworkScriptFile is the CLI flag as well. So thankful for --showConfig to see the underlying config being applied 🙏

this fixed the issue for me in Jest jestjs/jest#4545 (comment)

Cheers, @capaj!

>$  yarn add raf --dev

// package.json
...

"jest": {
  "setupFiles": [
      "raf/polyfill"
    ]
},

...

BEFORE

AFTER

@capaj, Great... 👍

// package.json

...
"setupFiles": [
"raf/polyfill"
]
...

Thanks!.. am using jest package and now its fixed my console warning
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

@capaj, thanks!)

@capaj, Thanks!!!

@capaj, Thanks!