Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?

capaj commented Aug 25, 2017

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

"setupFiles": [
      "raf/polyfill"
    ]

flarnie commented Sep 21, 2017

Note that this will be moved to official React docs soon - see checklist on facebook/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. 💯

bfocht commented Sep 27, 2017

@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

facebookincubator/create-react-app#3199

dubbha commented Sep 27, 2017

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

biuuu commented Sep 30, 2017

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

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

acatl commented Oct 6, 2017

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

jtrein commented Oct 11, 2017

Cheers, @capaj!

>$  yarn add raf --dev

// package.json
...

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

...

BEFORE
screen shot 2017-10-11 at 11 49 36

AFTER
screen shot 2017-10-11 at 11 49 55

karthickyuva commented Oct 13, 2017

@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

isaldin commented Oct 26, 2017

@capaj, thanks!)

@capaj, Thanks!!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment