DEV Community

Maria Campbell
Maria Campbell

Posted on

4 1

requestAnimationFrame & polyfill in React 16

If you read my previous post, "My first time using React 16.0", you know that I got the following warning when I typed npm run test in Terminal:

> react-universal-blog-app@1.0.0 test /Users/mariacam/Development/react-universal-blog-app
> jest

PASS  src/sum.test.js
PASS  src/App.test.js
  ● Console

    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


Test Suites: 2 passed, 2 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        1.669s
Ran all test suites.
Enter fullscreen mode Exit fullscreen mode

Notice something different?

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
Enter fullscreen mode Exit fullscreen mode

The React Polyfills link took me to the gist on Github entitled
React 16 JavaScript Environment.md. There, I learned that React 16 depends on the collection types Map and Set. And, that if developers

are supporting older browsers and devices which may not yet provide these natively (e.g. IE < 11), (they should) consider including a global polyfill in (their) bundled application, such as core-js or babel-polyfill.

Since their example used core-js, I decided to go that route.

Next, the warning in Terminal also let me know that React depends on requestAnimationFrame, even in test environments. And the React Team, specifically @gaearon (Dan Abramov), states:

React also depends on **requestAnimationFrame** (even in test environments). A simple shim for testing environments would be: ```markdown global.requestAnimationFrame = function(callback) { setTimeout(callback, 0); }; ```

So I first installed core-js using npm:

npm install core-js --save-dev
Enter fullscreen mode Exit fullscreen mode

Then, in index.js, I added the following at the top:

import React, { Component } from 'react';
import { render } from 'react-dom';
import 'core-js/es6/map';
import 'core-js/es6/set';
import './images/favicon.ico';
Enter fullscreen mode Exit fullscreen mode

And in App.test.js, right below my imports, I added:

global.requestAnimationFrme = function(callback) {
    setTimeout(callback, 0);
};
Enter fullscreen mode Exit fullscreen mode

Next, I installed raf:

npm install raf --save-dev
Enter fullscreen mode Exit fullscreen mode

After that, I added the following in my package.json within my Jest configuration:

"jest": {
    "setupFiles": [
      "raf/polyfill"
    ],
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less)$": "identity-obj-proxy"
    }
  },
Enter fullscreen mode Exit fullscreen mode

And lastly, I decided to install the identity-obj-proxy npm package so that I could mock a proxy for my className lookups in Jest Snapshot Testing because I use CSS Modules:

npm install identity-obj-proxy --save-dev
Enter fullscreen mode Exit fullscreen mode

It comes recommended.

Then I typed npm run test again to see what happens. This is what was returned in Terminal:

PASS  src/App.test.js
 PASS  src/sum.test.js

Test Suites: 2 passed, 2 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        1.274s
Enter fullscreen mode Exit fullscreen mode

Success! I added all the new features required for React 16 (so far), and all my warnings and errors were gone.

I think the React Team is realizing that there are more and more developers either customizing create-react-app or developing their own workflows. Either way, I am grateful for all this awesome documentation. Thanks React, espcially @gaearon (Dan Abramov), who made this gist!

Related Articles:

React v16.0, facebook.github.io

Using requestAnimationFrame, CSS Tricks

window.requestAnimationFrame(), MDN

Animating with requestAnimationFrame, Kirupa

requestAnimationFrame for Smart Animating, Paul Irish, creator of requestAnimationFrame

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay