Cleanup and add testing framework

- Update npm
- Add to eslint
- Style cleanup
- Add constants.js
- Add jest

.eslintrc

@@ -33,7 +33,9 @@
         "extensions": [".js", ".jsx"]
       }
     ],
+    "react/destructuring-assignment": false,
     "react/prop-types": 0,
+    "react/prefer-stateless-function": false,
     "no-underscore-dangle": 0,
     "import/imports-first": ["error", "absolute-first"],
     "import/newline-after-import": "error"

package.json

@@ -8,11 +8,18 @@
     "lint": "prettier --check src/** && eslint --fix src/**",
     "lint-check": "eslint --print-config src/**/*.js | eslint-config-prettier-check",
     "start": "parcel index.html",
-    "test": "test"
+    "test": "jest --watch"
+  },
+  "jest": {
+    "setupFilesAfterEnv": [
+      "./tests/setupTests.js"
+    ]
   },
   "keywords": [
     "React",
-    "Parcel"
+    "Parcel",
+    "Jest",
+    "Enzyme"
   ],
   "author": "haworku",
   "license": "ISC",
@@ -23,18 +30,23 @@
   },
   "devDependencies": {
     "@babel/core": "7.4.4",
-    "@babel/plugin-proposal-class-properties": "^7.4.4",
-    "@babel/plugin-transform-runtime": "^7.4.4",
-    "@babel/preset-env": "^7.4.4",
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/plugin-transform-runtime": "^7.5.5",
+    "@babel/preset-env": "^7.5.5",
     "@babel/preset-react": "^7.0.0",
-    "babel-eslint": "^10.0.1",
+    "babel-eslint": "^10.0.2",
+    "babel-jest": "^24.8.0",
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-16": "^1.14.0",
     "eslint": "^5.16.0",
-    "eslint-config-airbnb": "^17.1.0",
-    "eslint-config-prettier": "^4.1.0",
-    "eslint-plugin-import": "^2.16.0",
-    "eslint-plugin-jsx-a11y": "^6.2.1",
-    "eslint-plugin-prettier": "^3.0.1",
-    "eslint-plugin-react": "^7.12.4",
+    "eslint-config-airbnb": "^17.1.1",
+    "eslint-config-prettier": "^4.3.0",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-prettier": "^3.1.0",
+    "eslint-plugin-react": "^7.14.2",
+    "jest": "^24.8.0",
+    "jest-cli": "^24.8.0",
     "parcel-bundler": "^1.12.3",
     "prettier": "1.17.0"
   }

src/components/App.js

@@ -7,30 +7,32 @@ const style = {
     flexDirection: 'column',
   },
   header: {
-    borderBottom: 'double',
-    height: '2rem',
-    lineHeight: '2rem',
-    textAlign: 'center',
+    borderBottom: '1px solid grey',
+    height: '100%',
   },
   main: {
     display: 'flex',
-    flex: 1,
+    flexDirection: 'column',
   },
 };
 
 class App extends Component {
-  componentDidMount() {
-    console.log('Here!');
-  }
-
   render() {
     return (
       <div style={style.container}>
         <header style={style.header}>
-          toy train react
-          <span aria-label="train-emoji" role="img">
-            🚂
-          </span>
+          <h1>
+            <span aria-label="train-emoji" role="img">
+              🚂
+            </span>
+            <span aria-label="train-emoji" role="img">
+              🚂
+            </span>
+            <span aria-label="train-emoji" role="img">
+              🚂
+            </span>
+            <span>toy train react</span>
+          </h1>
         </header>
         <main style={style.main} />
       </div>

tests/App.test.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import App from '../src/components/App';
+
+describe('App', () => {
+  const app = shallow(<App />);
+
+  it('renders the title', () => {
+    expect(app.find('h1').exists()).toBe(true);
+  });
+});

tests/setupTests.js

@@ -0,0 +1,4 @@
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+configure({ adapter: new Adapter() });