1) add Jest+Webpack infrastructure, 2) refactor eslint: migrate to airbnb config, add special eslint config for tests

Author: vinogradov

.babelrc

@@ -1,16 +1,18 @@
 {
-    "presets": [
-        [
-            "es2015",
-            {
-                "modules": false
-            }
-        ],
-        "es2016",
-        "es2017",
-        "react"
+  "presets": [
+    [
+      "es2015", {"modules": false}
     ],
-    "plugins": [
-        "transform-object-rest-spread"
-    ]
-}
+    "es2016",
+    "es2017",
+    "react"
+  ],
+  "plugins": [
+    "transform-object-rest-spread"
+  ],
+  "env": {
+    "test": {
+      "plugins": ["transform-es2015-modules-commonjs"]
+    }
+  }
+}

.editorconfig

@@ -1,5 +1,5 @@
 [*]
 end_of_line = lf
-insert_final_newline = false
+insert_final_newline = true
 indent_style = space
-indent_size = 4
+indent_size = 2

.eslintignore

@@ -0,0 +1,2 @@
+dist
+__tests__

.eslintrc-test.js

@@ -0,0 +1,15 @@
+module.exports = {
+  extends: [
+    './.eslintrc.js',
+    'plugin:jest/recommended'
+  ],
+  plugins: [
+    'jest'
+  ],
+  env: {
+    jest: true
+  },
+  rules: {
+    'no-magic-numbers': ['off']
+  }
+};

.eslintrc.js

@@ -1,179 +1,12 @@
 module.exports = {
-    'parserOptions': {
-        'ecmaVersion': 8,
-        'sourceType': 'module',
-        'ecmaFeatures': {
-            'jsx': true,
-            'experimentalObjectRestSpread': true
-        }
-    },
-    'rules': {
-        // Possible Errors (http://eslint.org/docs/rules/#possible-errors):
-        'valid-jsdoc': ['warn', {
-            'prefer': {
-                'return': 'returns'
-            }
-        }],
-
-
-        // Best Practices (http://eslint.org/docs/rules/#best-practices):
-        'consistent-return': ['warn'],
-        'curly': ['warn'],
-        'dot-location': ['warn', 'property'],
-        'dot-notation': ['warn'],
-        'eqeqeq': ['warn'],
-        'no-alert': ['warn'],
-        'no-caller': ['warn'],
-        'no-else-return': ['warn'],
-        'no-empty-function': ['warn'],
-        'no-empty-pattern': ['warn'],
-        'no-eq-null': ['warn'],
-        'no-eval': ['warn'],
-        'no-extend-native': ['warn'],
-        'no-extra-bind': ['warn'],
-        'no-extra-label': ['warn'],
-        'no-fallthrough': ['warn'],
-        'no-floating-decimal': ['warn'],
-        'no-implicit-coercion': ['warn', {
-            'boolean': false
-        }],
-        'no-implicit-globals': ['warn'],
-        'no-implied-eval': ['warn'],
-        'no-invalid-this': ['warn'],
-        'no-iterator': ['warn'],
-        'no-labels': ['warn'],
-        'no-lone-blocks': ['warn'],
-        'no-loop-func': ['warn'],
-        'no-magic-numbers': ['warn'],
-        'no-multi-spaces': ['warn'],
-        'no-native-reassign': ['warn'],
-        'no-new-func': ['warn'],
-        'no-new-wrappers': ['warn'],
-        'no-proto': ['warn'],
-        'no-redeclare': ['warn'],
-        'no-return-assign': ['warn'],
-        'no-script-url': ['warn'],
-        'no-self-assign': ['warn'],
-        'no-self-compare': ['warn'],
-        'no-sequences': ['warn'],
-        'no-unmodified-loop-condition': ['warn'],
-        'no-unused-expressions': ['warn'],
-        'no-unused-labels': ['warn'],
-        'no-useless-call': ['warn'],
-        'no-useless-concat': ['warn'],
-        'no-useless-escape': ['warn'],
-        'no-with': ['warn'],
-        'require-await': ['warn'],
-        'wrap-iife': ['warn'],
-        'yoda': ['warn'],
-
-
-        // Strict Mode (http://eslint.org/docs/rules/#strict-mode):
-        'strict': ['warn'],
-
-
-        // Variables (http://eslint.org/docs/rules/#variables):
-        'no-catch-shadow': ['warn'],
-        'no-delete-var': ['warn'],
-        'no-label-var': ['warn'],
-        'no-shadow': ['warn'],
-        'no-shadow-restricted-names': ['warn'],
-        'no-undef-init': ['warn'],
-        'no-use-before-define': ['warn'],
-
-
-        // Node.js and CommonJS (http://eslint.org/docs/rules/#nodejs-and-commonjs):
-        'global-require': ['warn'],
-        'no-mixed-requires': ['warn'],
-        'no-path-concat': ['warn'],
-        'no-sync': ['warn'],
-
-
-        // Stylistic Issues (http://eslint.org/docs/rules/#stylistic-issues):
-        'array-bracket-spacing': ['warn'],
-        'block-spacing': ['warn'],
-        'brace-style': ['warn', '1tbs', {'allowSingleLine': true}],
-        'camelcase': ['warn', {'properties': 'never'}],
-        'comma-dangle': ['warn', 'never'],
-        'comma-spacing': ['warn', {'before': false, 'after': true}],
-        'comma-style': ['warn', 'last'],
-        'computed-property-spacing': ['warn', 'never'],
-        'consistent-this': ['warn', 'that'],
-        'func-style': ['warn', 'declaration'],
-        'indent': ['warn', 4, {'SwitchCase': 1}],
-        'key-spacing': ['warn'],
-        'keyword-spacing': ['warn'],
-        'linebreak-style': ['warn', 'unix'],
-        'max-depth': ['warn', 10],
-        'max-len': ['warn', {'code': 140, 'ignoreUrls': true}],
-        'max-nested-callbacks': ['warn', 5],
-        'max-params': ['warn', 5],
-        'max-statements-per-line': ['warn', {'max': 10}],
-        'new-cap': ['warn'],
-        'new-parens': ['warn'],
-        'no-lonely-if': ['warn'],
-        'no-mixed-spaces-and-tabs': ['warn'],
-        'no-nested-ternary': ['warn'],
-        'no-new-object': ['warn'],
-        'no-spaced-func': ['warn'],
-        'no-trailing-spaces': ['warn'],
-        'no-underscore-dangle': ['warn', {'allowAfterThis': true}],
-        'no-unneeded-ternary': ['warn'],
-        'no-whitespace-before-property': ['warn'],
-        'object-curly-spacing': ['warn', 'never'],
-        'one-var-declaration-per-line': ['warn'],
-        'operator-assignment': ['warn'],
-        'operator-linebreak': ['warn', 'after'],
-        'padded-blocks': ['warn', {'blocks': 'never', 'switches': 'never', 'classes': 'never'}],
-        'quote-props': ['warn', 'as-needed'],
-        'quotes': ['warn', 'single'],
-        'semi': ['warn', 'always'],
-        'semi-spacing': ['warn', {'before': false, 'after': true}],
-        'space-before-blocks': ['warn'],
-        'space-before-function-paren': ['warn', 'never'],
-        'space-in-parens': ['warn', 'never'],
-        'space-infix-ops': ['warn'],
-        'space-unary-ops': ['warn', {'words': true, 'nonwords': false}],
-        'spaced-comment': ['warn', 'always'],
-
-
-        // ECMAScript2015 (http://eslint.org/docs/rules/#ecmascript-6):
-        'arrow-body-style': ['warn', 'as-needed'],
-        'arrow-parens': ['warn'],
-        'arrow-spacing': ['warn', {'before': true, 'after': true}],
-        'constructor-super': ['warn'],
-
-        'generator-star-spacing': ['warn', {'before': true, 'after': true}],
-        'yield-star-spacing': ['warn', {'before': true, 'after': true}],
-
-        'no-class-assign': ['warn'],
-        'no-confusing-arrow': ['warn', {'allowParens': true}],
-        'no-const-assign': ['warn'],
-        'no-dupe-class-members': ['warn'],
-        'no-duplicate-imports': ['warn'],
-        'no-new-symbol': ['warn'],
-        'no-this-before-super': ['warn'],
-        'no-useless-constructor': ['warn'],
-        'no-var': ['warn'],
-        'object-shorthand': ['warn', 'always'],
-        'prefer-arrow-callback': ['warn'],
-        'prefer-const': ['warn'],
-        'prefer-reflect': ['warn'],
-        'prefer-rest-params': ['warn'],
-        'prefer-spread': ['warn'],
-        'prefer-template': ['warn'],
-        'require-yield': ['warn'],
-        'template-curly-spacing': ['warn', 'never']
-    },
-    'env': {
-        'browser': true,
-        'commonjs': true
-    },
-    'extends': [
-        'eslint:recommended',
-        'plugin:react/recommended'
-    ],
-    'plugins': [
-        'react'
-    ]
-};
+  rules: {
+    'object-curly-spacing': ['warn', 'never'],
+    'comma-dangle': ['warn', 'never'],
+    'max-len': ['warn', 120],
+    'react/jsx-filename-extension': ['off']
+  },
+  env: {
+    browser: true
+  },
+  extends: 'airbnb'
+};

README.md

@@ -1,9 +1,14 @@
 Includes only the latest and greatest web technologies. Use it for your next heroic SPA project because you can't go wrong with it. Contains minimal viable "hello, world" code just to proof it works. Remove hello world and write your own great project.
 
+# Principles
+1. Use plain ES2015/16/17. Minimize use of experimental Stage-* Javascript features
+1. Use tests (by [jest](https://github.com/facebook/jest))
+1. Use linting (by [airbnb eslint config](https://github.com/airbnb/javascript))
+
 Suitable for:
 1. Education
-2. Small pet projects/protorypes
-3. Production
+1. Small pet projects/protorypes
+1. Production
 
 # 🎁 What’s Inside?
 
@@ -43,4 +48,4 @@ If you have problems with running it please [file an issue](https://github.com/v
 # Examples
 
 1. [examples/react](https://github.com/vinogradov/react-starter-kit/tree/master/src/examples/react) - trivial hello world using React
-1. [examples/redux](https://github.com/vinogradov/react-starter-kit/tree/master/src/examples/redux) - counter example with `redux` and `redux-saga`
+1. [examples/redux](https://github.com/vinogradov/react-starter-kit/tree/master/src/examples/redux) - counter example with `redux` and `redux-saga`

__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'path-to-file';

__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

package.json

@@ -6,12 +6,13 @@
   "scripts": {
     "start": "webpack-dev-server",
     "dist": "webpack --display-error-details --env.dist",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "jest src",
+    "lint": "eslint .; eslint --no-ignore --config .eslintrc.js --config .eslintrc-test.js --ext test.js ."
   },
   "license": "MIT",
   "dependencies": {
     "babel-core": "6.24.1",
-    "babel-jest": "19.0.0",
+    "babel-jest": "20.0.1",
     "babel-loader": "7.0.0",
     "babel-plugin-transform-object-rest-spread": "6.23.0",
     "babel-preset-es2015": "6.24.1",
@@ -21,31 +22,42 @@
     "clean-webpack-plugin": "0.1.16",
     "css-loader": "0.28.1",
     "eslint": "3.19.0",
+    "eslint-config-airbnb": "14.1.0",
     "eslint-loader": "1.7.1",
-    "eslint-plugin-react": "6.10.3",
+    "eslint-plugin-import": "2.2.0",
+    "eslint-plugin-jest": "20.0.1",
+    "eslint-plugin-jsx-a11y": "4.0.0",
+    "eslint-plugin-react": "7.0.1",
     "extract-text-webpack-plugin": "2.1.0",
     "file-loader": "0.11.1",
     "html-webpack-plugin": "2.28.0",
     "isomorphic-fetch": "2.2.1",
-    "jest": "19.0.2",
+    "jest": "20.0.1",
     "node-sass": "4.5.2",
-    "prop-types": "15.5.8",
+    "prop-types": "15.5.10",
     "react": "15.5.4",
     "react-dom": "15.5.4",
     "react-redux": "5.0.4",
     "react-router-dom": "4.1.1",
+    "react-test-renderer": "15.5.4",
     "redux": "3.6.0",
     "redux-logger": "3.0.1",
-    "redux-saga": "0.15.1",
+    "redux-saga": "0.15.3",
     "redux-thunk": "2.2.0",
-    "sass-loader": "6.0.3",
+    "sass-loader": "6.0.5",
     "style-loader": "0.17.0",
-    "webpack": "2.5.0"
+    "webpack": "2.5.1"
   },
   "devDependencies": {
     "webpack-dev-server": "2.4.5"
   },
   "engines": {
     "node": ">=7.5.0"
+  },
+  "jest": {
+    "moduleNameMapper": {
+      "\\.(scss)$": "<rootDir>/__mocks__/styleMock.js",
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|ico)$": "<rootDir>/__mocks__/fileMock.js"
+    }
   }
 }

src/entry.js

@@ -1,5 +1,6 @@
+/* eslint-disable */
 import 'file-loader?name=[name].[ext]!./favicon.ico';
+/* eslint-enable */
 
-import './examples/react';
-// import './examples/redux';
-
+// import './examples/react/index';
+import './examples/redux';

src/examples/react/__tests__/__snapshots__/hello.test.js.snap

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="hello-message"
+>
+  <div>
+    Hello 
+    <span
+      className="name"
+    >
+      John
+    </span>
+  </div>
+  <button
+    onClick={[Function]}
+  >
+    toggle: 
+    ON
+  </button>
+</div>
+`;

src/examples/react/__tests__/hello.test.js

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import renderer from 'react-test-renderer';
+import Hello from '../hello';
+
+test('renders correctly', () => {
+  const tree = renderer.create(
+    <Hello name="John" />
+  ).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});