fix requestAnimationFrame error, also added Gift component test

package.json

@@ -18,6 +18,7 @@
     "enzyme": "^3.0.0",
     "enzyme-adapter-react-16": "^1.0.0",
     "jest-cli": "^20.0.4",
+    "raf": "^3.3.2",
     "react-test-renderer": "^16.0.0-beta.5"
   }
 }

src/components/App.js

@@ -24,8 +24,8 @@ class App extends Component {
         <h2>Gift Giver</h2>
         <div className="gift-list">
           {
-            this.state.gifts.map( (gift, index) => {
-              return (<div key={index}></div>);
+            this.state.gifts.map( gift => {
+              return (<div key={gift.id}></div>);
             })
           }
         </div>

src/components/App.test.js

@@ -5,25 +5,32 @@ import Adapter from 'enzyme-adapter-react-16';
 
 configure({ adapter: new Adapter() });
 
-const app = shallow(<App />);
-
-it('renders correctly', () => {
-  expect(app).toMatchSnapshot();
-});
-
-it('initializes the `state` with an empty list of gifts', () => {
-  expect(app.state().gifts).toEqual([]);
-});
-
-it('adds a new gift to `state` when clicking the `add gift` button', () => {
-  app.find('.btn-add').simulate('click');
-
-  expect(app.state().gifts).toEqual([{ id: 1 }]);
-});
-
-it('adds a new gift to the rendered list when clicking the `add gift` button', () => {
-  app.find('.btn-add').simulate('click');
-
-  const listLength = app.find('.gift-list').children().length;
-  expect(listLength).toEqual(2);
+describe('App', () => {
+  const app = shallow(<App />);
+
+  it('renders correctly', () => {
+    expect(app).toMatchSnapshot();
+  });
+
+  it('initializes the `state` with an empty list of gifts', () => {
+    expect(app.state().gifts).toEqual([]);
+  });
+
+  describe('when clicking the `add gift` button', () => {
+    beforeEach(() => {
+      app.find('.btn-add').simulate('click');      
+    });
+    afterEach(() => {
+      app.setState({ gifts: [] });
+    });
+
+    it('adds a new gift to `state`', () => {
+      expect(app.state().gifts).toEqual([{ id: 1 }]);
+    });
+
+    it('adds a new gift to the rendered list', () => {
+      const listLength = app.find('.gift-list').children().length;
+      expect(listLength).toEqual(1);
+    });
+  });
 });

src/components/Gift.test.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { shallow } from "enzyme";
+import Gift from "./components.Gift";
+
+describe('Gift', () => {
+  const gift = shallow(<Gift />);
+
+  it('should render', () => {
+    expect(gift).toMatchSnapshot();
+  })
+});

src/components/__snapshots__/App.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders correctly 1`] = `
+exports[`App renders correctly 1`] = `
 ShallowWrapper {
   "length": 1,
   Symbol(enzyme.__root__): [Circular],

src/shim.js

@@ -0,0 +1,3 @@
+global.requestAnimationFrame = callback => {
+  setTimeout(callback, 0);
+};