Instantly share code, notes, and snippets.

Embed
What would you like to do?
@capaj

This comment has been minimized.

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

This comment has been minimized.

flarnie commented Sep 21, 2017

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

@hipertracker

This comment has been minimized.

hipertracker commented Sep 26, 2017

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

@guyellis

This comment has been minimized.

guyellis commented Sep 27, 2017

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.

@guyellis

This comment has been minimized.

guyellis commented Sep 27, 2017

@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

This comment has been minimized.

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

facebook/create-react-app#3199

@dubbha

This comment has been minimized.

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',
],

@trodrigues

This comment has been minimized.

trodrigues commented Sep 28, 2017

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

@cameronroe

This comment has been minimized.

cameronroe commented Sep 28, 2017

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

This comment has been minimized.

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.

@rockchalkwushock

This comment has been minimized.

rockchalkwushock commented Oct 3, 2017

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

This comment has been minimized.

@rockchalkwushock

This comment has been minimized.

rockchalkwushock commented Oct 3, 2017

@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

This comment has been minimized.

acatl commented Oct 6, 2017

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

@jtrein

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

isaldin commented Oct 26, 2017

@capaj, thanks!)

@neomusic

This comment has been minimized.

neomusic commented Dec 11, 2017

@capaj, Thanks!!!

@1Jesper1

This comment has been minimized.

1Jesper1 commented Sep 19, 2018

@capaj, Thanks!

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