StephenGrider · andresn · Mar 27, 2018 · Mar 27, 2018 · Mar 27, 2018 · Mar 27, 2018
diff --git a/.babelrc b/.babelrc
@@ -1,3 +1,13 @@
 {
-  "presets": ["react", "es2015", "stage-1"]
+  "presets": ["react", "env"],
+  "plugins": [
+    [
+        // See: https://github.com/babel/babel-preset-env/issues/49
+        "transform-object-rest-spread",
+        {
+          "useBuiltIns": true
+        }
+    ],
+    "transform-class-properties"
+  ]
 }
diff --git a/.gitignore b/.gitignore
@@ -2,7 +2,5 @@
 bundle.js
 npm-debug.log
 .DS_Store
+*.sublime*
 
-# IntelliJ
-*.iml
-/.idea
diff --git a/README.md b/README.md
@@ -1,4 +1,13 @@
-# ReduxSimpleStarter
+# ReduxSimpleStarterRefreshed
+
+This fork contains the following updates as of 3/28/2018:
+- Upgraded to React 16.
+- Upgraded to React-Redux 5.
+- Upgraded to Webpack 4.
+- Changed babel preset to 'env': https://www.npmjs.com/package/babel-preset-env 
+- Moved from using Mocha/Chai to Jest/Enzyme. Demo test is within src/components/. See "Run Tests" section below.
+- Package control using Yarn instead of NPM.
+- Added support for JS object rest spread (...destructuring) and class properties.
 
 Interested in learning [Redux](https://www.udemy.com/react-redux/)?
 
@@ -7,19 +16,28 @@ Interested in learning [Redux](https://www.udemy.com/react-redux/)?
 There are two methods for getting started with this repo.
 
 #### Familiar with Git?
-Checkout this repo, install dependencies, then start the gulp process with the following:
+Checkout this repo, install dependencies, then:
 
 ```
-> git clone https://github.com/StephenGrider/ReduxSimpleStarter.git
-> cd ReduxSimpleStarter
-> npm install
-> npm start
+> git clone https://github.com/andresn/ReduxSimpleStarterRefreshed.git
+> cd ReduxSimpleStarterRefreshed
+> yarn install
+> yarn start
 ```
 
 #### Not Familiar with Git?
-Click [here](https://github.com/StephenGrider/ReactStarter/releases) then download the .zip file.  Extract the contents of the zip file, then open your terminal, change to the project directory, and:
+Click [here](https://github.com/andresn/ReduxSimpleStarterRefreshed/releases) then download the .zip file.  Extract the contents of the zip file, then open your terminal, change to the project directory, and:
+
+```
+> yarn install
+> yarn start
+```
+
+#### To Run Tests
+This repo uses Jest and Enzyme for testing. Here's a great video intro: https://www.youtube.com/watch?v=aSQ8v9JH5C8
 
 ```
-> npm install
-> npm start
+> yarn test
+> yarn test:watch # Tests will run as you make modifications
+> yarn test:cover # Produce a code coverage report. Open ./coverage/Icov-report/index.html in browser and profit!
 ```
diff --git a/enzyme.config.js b/enzyme.config.js
@@ -0,0 +1,4 @@
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+Enzyme.configure({ adapter: new Adapter() });
diff --git a/index.html b/index.html
@@ -4,7 +4,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="/style/style.css">
     <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/48938155eb24b4ccdde09426066869504c6dab3c/dist/css/bootstrap.min.css">
-    <script src="https://maps.googleapis.com/maps/api/js"></script>
   </head>
   <body>
     <div class="container"></div>

diff --git a/jest.config.js b/jest.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+    setupFiles: [
+        '<rootDir>/enzyme.config.js'
+    ]
+};
diff --git a/package.json b/package.json
@@ -5,33 +5,35 @@
   "main": "index.js",
   "repository": "git@github.com:StephenGrider/ReduxSimpleStarter.git",
   "scripts": {
-    "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
-    "test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
-    "test:watch": "npm run test -- --watch"
+    "start": "webpack-dev-server --inline --hot --mode development --open",
+    "test": "jest",
+    "test:watch": "yarn test -- --watch",
+    "test:cover": "yarn test -- --coverage"
   },
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "babel-core": "^6.2.1",
-    "babel-loader": "^6.2.0",
-    "babel-preset-es2015": "^6.1.18",
-    "babel-preset-react": "^6.1.18",
-    "chai": "^3.5.0",
-    "chai-jquery": "^2.0.0",
-    "jquery": "^2.2.1",
-    "jsdom": "^8.1.0",
-    "mocha": "^2.4.5",
-    "react-addons-test-utils": "^0.14.7",
-    "webpack": "^1.12.9",
-    "webpack-dev-server": "^1.14.0"
+    "babel-jest": "^22.4.3",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
+    "jest": "^22.4.3",
+    "prettier": "^1.11.1",
+    "webpack": "^4.2.0",
+    "webpack-cli": "^2.0.13",
+    "webpack-dev-server": "^3.1.1"
   },
   "dependencies": {
-    "babel-preset-stage-1": "^6.1.18",
-    "lodash": "^3.10.1",
-    "react": "^0.14.3",
-    "react-dom": "^0.14.3",
-    "react-redux": "4.3.0",
-    "react-router": "^2.0.1",
-    "redux": "^3.0.4"
+    "babel-loader": "^7.1.4",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-polyfill": "^6.26.0",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-react": "^6.24.1",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-redux": "^5.0.7",
+    "react-router": "^4.2.0",
+    "redux": "^3.7.2",
+    "redux-thunk": "^2.2.0"
   }
 }
diff --git a/src/components/app.js b/src/components/app.js
@@ -1,9 +1,28 @@
 import React, { Component } from 'react';
 
 export default class App extends Component {
-  render() {
-    return (
-      <div>React simple starter</div>
-    );
-  }
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            buttonText: 'Get Started!'
+        };
+        this.handleGetStarted = this.handleGetStarted.bind(this);
+    }
+
+    handleGetStarted() {
+        this.setState({
+            'buttonText': 'Started!'
+        });
+    }
+
+    render() {
+        const buttonText = this.state.buttonText;
+        return (
+            <div>
+                <h1>Redux Simple Starter</h1>
+                <button className="get-started" onClick={this.handleGetStarted}>{buttonText}</button>
+            </div>
+        );
+    }
 }
diff --git a/src/components/app.test.js b/src/components/app.test.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import {
+    mountComponentWithRedux
+} from '../../test_helper';
+import App from './app';
+
+
+describe(
+    'Components::App',
+    () => {
+        let component;
+        beforeEach(
+            () => {
+                component = mountComponentWithRedux(App);
+            }
+        );
+        it(
+            'renders',
+            () => {
+                expect(component.exists()).toBe(true);
+            }
+        );
+        it(
+            'renders button',
+            () => {
+                expect(component.find('.get-started').exists()).toBe(true);
+            }
+        );
+        it(
+            'button is clickable',
+            () => {
+                component.find('.get-started').simulate('click');
+                expect(component.find('.get-started').text()).toEqual('Started!');
+            }
+        );
+    }
+);
diff --git a/test/components/app_test.js b/test/components/app_test.js
diff --git a/test/test_helper.js b/test/test_helper.js
diff --git a/test_helper.js b/test_helper.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { createStore } from 'redux';
+import { mount } from 'enzyme';
+import reducers from './src/reducers';
+
+function mountComponentWithRedux(
+    ComponentClass,
+    state = {},
+    props = {}
+) {
+  const componentInstance = mount( // produces app by going through full React lifecycle
+    <Provider store={createStore(reducers, state)}>
+      <ComponentClass {...props} />
+    </Provider>
+  );
+  return componentInstance;
+}
+
+export { mountComponentWithRedux };
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,3 +1,5 @@
+var path = require('path');
+
 module.exports = {
   entry: [
     './src/index.js'
@@ -8,16 +10,17 @@ module.exports = {
     filename: 'bundle.js'
   },
   module: {
-    loaders: [{
-      exclude: /node_modules/,
-      loader: 'babel',
-      query: {
-        presets: ['react', 'es2015', 'stage-1']
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader'
+      }, {
+        test: /\.jsx?$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader'
       }
-    }]
-  },
-  resolve: {
-    extensions: ['', '.js', '.jsx']
+    ]
   },
   devServer: {
     historyApiFallback: true,