Proposal: Use Mocha as a test runner with jsdom (#847)

* Bump babel dependencies

- babel-cli
- babel-core
- babel-loader
- babel-plugin-transform-react-constant-elements
- babel-plugin-transform-react-inline-elements
- babel-plugin-transform-react-remove-prop-types
- babel-preset-es2015
- babel-preset-react
- babel-preset-stage-0

* Add babel-register as dev dependency

* Replace karma test runner with mocha

- Add setup.js which:
        - requires babel-register
        - Initialises jsdom by loading document into global scope
- Add compilers/css to ignore css extensions
- Replace test, test:watch commands with mocha

* Modify tests to use relative paths for mocha

- import sinon because we no longer inject it in karma

* Remove karma dependencies 🎉

- We no longer use webpack to pack our tests
- Removed:
        - karma
        - karma-jsdom-launcher
        - karma-mocha
        - karma-mocha-reporter
        - karma-sinon
        - karma-sourcemap-loader
        - null-loader
- Added:
        - jsdom

* Remove unneeded tests.webpack.js

* Remove unneeded karma.conf.js

* Modify eslintignore to remove tests.webpack and karma.conf
- Removed as they no longer exist

* Modify README to no longer mention karma for unit tests

.eslintignore

@@ -1,6 +1,4 @@
 /compiled/**
 /public/**
 /webpack/**
-karma.conf.js
-tests.webpack.js
 /api/promiseMiddleware.js

README.md

@@ -33,7 +33,7 @@ _Formerly known as choonkending/react-webpack-node_
 - [**Webpack 2**](https://github.com/webpack/webpack) for both development and production bundles. It's (in my opinion) the best bundler for JS, CSS, LESS, images, and lots more!
 - [**CSS Modules**](https://github.com/css-modules/css-modules) allows for modular and reusable CSS. Say goodbye to conflicts (most of them) and global scope
 
-- **Unit Testing** with webpack, karma, jsdom, mocha, sinon & enzyme
+- **Unit Testing** with jsdom, mocha, sinon & enzyme
 	- Reducers
 	- Components ([Enzyme](http://airbnb.io/enzyme))
 	- Synchronous and Asynchronous Actions
@@ -102,10 +102,8 @@ Development is a breeze. Once you have installed all your dependencies all the c
 #### Unit Tests
 
 Testing with:
-- `karma` as test runner
-	- `karma.conf.js` for the main karma configuration (it has webpack configurations)
-	- `tests.webpack.js` which is the single entry file. It uses `webpack`'s require API to find all the files we need that have a `-test.js` suffix.
 - `mocha` as the test framework
+	- We find all the files we need that have a `-test.js` suffix in the `/app` directory.
 - `jsdom` as my test environment
 
 ```bash

app/tests/actions/topics-test.js

@@ -5,8 +5,9 @@ import md5 from 'spark-md5';
 import { polyfill } from 'es6-promise';
 import axios from 'axios';
 import expect from 'expect';
-import * as actions from 'actions/topics';
-import * as types from 'types';
+import sinon from 'sinon';
+import * as actions from '../../actions/topics';
+import * as types from '../../types';
 
 polyfill();
 

app/tests/actions/users-test.js

@@ -3,8 +3,9 @@ import thunk from 'redux-thunk';
 import { polyfill } from 'es6-promise';
 import axios from 'axios';
 import expect from 'expect';
-import * as actions from 'actions/users';
-import * as types from 'types';
+import sinon from 'sinon';
+import * as actions from '../../actions/users';
+import * as types from '../../types';
 
 polyfill();
 

app/tests/compilers/css.js

@@ -0,0 +1,4 @@
+function noop() { return null; }
+
+require.extensions['.css'] = noop;
+

app/tests/reducers/topic-test.js

@@ -1,7 +1,7 @@
 import expect from 'expect';
 import md5 from 'spark-md5';
-import reducer from 'reducers/topic';
-import * as types from 'types';
+import reducer from '../../reducers/topic';
+import * as types from '../../types';
 
 describe('Topics reducer', () => {
   const s = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';

app/tests/reducers/user-test.js

@@ -1,6 +1,6 @@
 import expect from 'expect';
-import reducer from 'reducers/user';
-import * as types from 'types';
+import reducer from '../../reducers/user';
+import * as types from '../../types';
 
 describe('Users reducer', () => {
   const initialState = {

app/tests/setup.js

@@ -0,0 +1,22 @@
+require('babel-register') ({
+  presets: ['es2015', 'react', 'stage-0']
+});
+var jsdom = require('jsdom').jsdom;
+
+var exposedProperties = ['window', 'navigator', 'document'];
+
+global.document = jsdom('');
+global.window = document.defaultView;
+Object.keys(document.defaultView).forEach((property) => {
+  if (typeof global[property] === 'undefined') {
+    exposedProperties.push(property);
+    global[property] = document.defaultView[property];
+  }
+});
+
+global.navigator = {
+  userAgent: 'node.js'
+};
+
+documentRef = document;
+

package.json

@@ -13,29 +13,23 @@
     "dev": "cross-env NODE_ENV=development nodemon",
     "build:dev": "cross-env NODE_ENV=development webpack --debug --colors --display-error-details --config ./webpack/webpack.config.js",
     "build": "npm run clean && cross-env NODE_ENV=production webpack --colors --display-error-details --config ./webpack/webpack.config.js",
-    "test": "cross-env NODE_ENV=test karma start ./app/tests/karma.conf.js",
-    "test:watch": "cross-env NODE_ENV=test npm test -- --watch --no-single-run"
+    "test": "mocha ./app/tests/setup.js --compilers css:./app/tests/compilers/css ./app/**/*-test.js",
+    "test:watch": "mocha ./app/tests/setup.js --watch --compilers css:./app/tests/compilers/css ./app/**/*-test.js"
   },
   "author": "Choon Ken Ding",
   "license": "MIT",
   "devDependencies": {
+    "babel-register": "^6.24.0",
     "enzyme": "^2.4.1",
     "eslint": "^3.5.0",
     "eslint-config-airbnb": "^10.0.0",
     "eslint-plugin-import": "^1.14.0",
     "eslint-plugin-jsx-a11y": "^2.2.0",
     "eslint-plugin-react": "^6.2.0",
     "expect": "^1.15.2",
-    "karma": "^1.3.0",
-    "karma-jsdom-launcher": "^4.0.0",
-    "karma-mocha": "^1.0.1",
-    "karma-mocha-reporter": "^2.1.0",
-    "karma-sinon": "^1.0.4",
-    "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^2.0.2",
+    "jsdom": "^9.12.0",
     "mocha": "^3.2.0",
     "nodemon": "^1.10.2",
-    "null-loader": "^0.1.1",
     "react-addons-test-utils": "^15.4.1",
     "react-transform-catch-errors": "^1.0.2",
     "redux-mock-store": "1.1.2",
@@ -47,18 +41,18 @@
   "dependencies": {
     "autoprefixer": "^6.4.0",
     "axios": "^0.14.0",
-    "babel-cli": "^6.14.0",
-    "babel-core": "^6.14.0",
+    "babel-cli": "^6.24.0",
+    "babel-core": "^6.24.0",
     "babel-eslint": "^6.1.2",
-    "babel-loader": "^6.2.5",
+    "babel-loader": "^6.4.1",
     "babel-plugin-react-transform": "^2.0.2",
-    "babel-plugin-transform-react-constant-elements": "^6.5.0",
-    "babel-plugin-transform-react-inline-elements": "^6.6.5",
-    "babel-plugin-transform-react-remove-prop-types": "^0.2.3",
-    "babel-preset-es2015": "^6.14.0",
-    "babel-preset-react": "^6.5.0",
+    "babel-plugin-transform-react-constant-elements": "^6.23.0",
+    "babel-plugin-transform-react-inline-elements": "^6.22.0",
+    "babel-plugin-transform-react-remove-prop-types": "^0.2.12",
+    "babel-preset-es2015": "^6.24.0",
+    "babel-preset-react": "^6.23.0",
     "babel-preset-react-hmre": "^1.1.1",
-    "babel-preset-stage-0": "^6.5.0",
+    "babel-preset-stage-0": "^6.22.0",
     "bcrypt-nodejs": "0.0.3",
     "bluebird": "^3.4.6",
     "body-parser": "^1.15.0",