Create a gist now

Instantly share code, notes, and snippets.

Embed
@capaj

This comment has been minimized.

Show comment
Hide comment
@capaj

capaj Aug 25, 2017

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

"setupFiles": [
      "raf/polyfill"
    ]

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.

Show comment
Hide comment
@flarnie

flarnie Sep 21, 2017

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

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.

Show comment
Hide comment
@hipertracker

hipertracker Sep 26, 2017

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

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

@guyellis

This comment has been minimized.

Show comment
Hide comment
@guyellis

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

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.

Show comment
Hide comment
@guyellis

guyellis 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. 💯

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

Show comment
Hide comment
@bfocht

bfocht 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

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

This comment has been minimized.

Show comment
Hide comment
@dubbha

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

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.

Show comment
Hide comment
@trodrigues

trodrigues Sep 28, 2017

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

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

@cameronroe

This comment has been minimized.

Show comment
Hide comment
@cameronroe

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

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.

Show comment
Hide comment
@biuuu

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

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.

Show comment
Hide comment
@rockchalkwushock

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

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

This comment has been minimized.

Show comment
Hide comment
@rockchalkwushock

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

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

Show comment
Hide comment
@acatl

acatl Oct 6, 2017

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

acatl commented Oct 6, 2017

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

@jtrein

This comment has been minimized.

Show comment
Hide comment
@jtrein

jtrein 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

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.

Show comment
Hide comment
@karthickyuva

karthickyuva 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

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.

Show comment
Hide comment

isaldin commented Oct 26, 2017

@capaj, thanks!)

@neomusic

This comment has been minimized.

Show comment
Hide comment

@capaj, Thanks!!!

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