requestAnimationFrame & polyfill in React 16
Tags: react16, dependencies, workflows, newfeatures
Published: 2017-09-27 16:47:11

---
title: requestAnimationFrame & polyfill in React 16
published: true
description: Some new dependencies in React 16
tags: react16, dependencies, workflows, newfeatures
---


If you read my previous post, [***"My first time using React 16.0"***](https://dev.to/letsbsocial1/my-first-time-using-react-160-ehf), you know that I got the following warning when I typed <code>npm run test</code> in **Terminal**:

```markdown
> 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.
```

Notice something different?

```markdown
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
```

The [React Polyfills](http://fb.me/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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) and [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set). ***And***, that if developers

<blockquote>
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 <a href="core-js(https://github.com/zloirock/core-js">core-js</a> or <a href="https://babeljs.io/docs/usage/polyfill/">babel-polyfill</a>.
</blockquote>

Since their example used <code>core-js</code>, I decided to go that route.

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

<blockquote>
<b>React</b> also depends on **requestAnimationFrame** (even in test environments). A simple shim for <b><i>testing environments</i></b> would be:

```markdown
global.requestAnimationFrame = function(callback) {
  setTimeout(callback, 0);
};
```
</blockquote>

So I first installed <code>core-js</code> using <code>npm</code>:

```markdown
npm install core-js --save-dev
```

Then, in <code>index.js</code>, I added the following at the top:

```markdown
import React, { Component } from 'react';
import { render } from 'react-dom';
import 'core-js/es6/map';
import 'core-js/es6/set';
import './images/favicon.ico';
```

And in <code>App.test.js</code>, right below my ***imports***, I added:

```markdown
global.requestAnimationFrme = function(callback) {
	setTimeout(callback, 0);
};
```

Next, I installed <code>raf</code>:

```markdown
npm install raf --save-dev
```

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

```markdown
"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"
    }
  },
```

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

```markdown
npm install identity-obj-proxy --save-dev
```

It comes [recommended](https://facebook.github.io/jest/docs/en/webpack.html).

Then I typed <code>npm run test</code> again to see what happens. This is what was returned in **Terminal**:

```markdown
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
```

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](https://facebook.github.io/react/blog/2017/09/26/react-v16.0.html), ***facebook.github.io***

[Using requestAnimationFrame](https://css-tricks.com/using-requestanimationframe/), ***CSS Tricks***

[window.requestAnimationFrame()](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame), ***MDN***

[Animating with requestAnimationFrame](https://www.kirupa.com/html5/animating_with_requestAnimationFrame.htm), ***Kirupa***

[requestAnimationFrame for Smart Animating](https://www.paulirish.com/2011/requestanimationframe-for-smart-animating/), ***Paul Irish***, creator of **requestAnimationFrame**