Add Jest as new unit test runner, keep Karma + Mocha as a fallback (#824)

* refactor: replace karma and mocha with jest

* refactor: remove webpack.test.conf

* refactor: prompt jest instead of mocha and karma

* feat(jest): add coverage reporting

* docs(jest): update unit.md with details of jest

* docs(jest): remove karma files from structure.md

* docs(jest): replace details on Karma with details on Jest

* docs: add missing period

* docs(jest): replace karma with Jest in commands.md

* docs(jest): update npm run unit bullet points

* refactor: use module-resolver in place of jest moduleNameMapper

* refactor: remove .vue extension from Hello import

* test: include src files in test coverage

* test: only ignore router/index in coverage if router option selected

* chore: fix merge conflicts

* chore: add MIT free Jest

* Reference dev script in start script instead of copy pasting (#894)

Less duplication FTW.

* feat: add karma option

* refactor: use const in webpack.test.conf

* add version tag to config/index.js

* stick to ES5

this file is not transpiled

* Bumping Vue+VueRouter versions, some minor fixes. (#986)

* switch hello-world tag to PascalCase (#951)

* fix Es6 code issue.

This file is not transpiled, so we should stick to ES5

* Fix bug in dev-server when a proxyTable entry is a string (#965)

`options` can not be a `const` because it is modified if value is a string.

* Fix casing

* Revert 9befbfc

* update to vue and vue-router latest version (#984)

- vue 2.5
- vue-router 3.0

* Fix missing dependency bumps (#987)

* switch hello-world tag to PascalCase (#951)

* fix Es6 code issue.

This file is not transpiled, so we should stick to ES5

* Fix bug in dev-server when a proxyTable entry is a string (#965)

`options` can not be a `const` because it is modified if value is a string.

* Fix casing

* Revert 9befbfc

* update to vue and vue-router latest version (#984)

- vue 2.5
- vue-router 3.0

* fix missing dependency updates for

* vue-template compiler
* vue-loader

* bump version string

* refactor: use jest module mapping

* feat(jest): filter jest setup file

* fix: fix trailing comma

* docs: add Jest and Karma to unit section

* fix: add Jest options if jest option

* test: change env in .eslintrc

* fix: remove merge trace

* fix: merge package.json with develop

* docs: split unit test docs into Jest and Karma

* docs: add Karma and Jest to README

* docs: reimplement karma files in structure.md

Author: eddyerburgh

README.md

@@ -39,10 +39,9 @@ The development server will run on port 8080 by default. If that port is already
   - Static assets compiled with version hashes for efficient long-term caching, and an auto-generated production `index.html` with proper URLs to these generated assets.
   - Use `npm run build --report`to build with bundle size analytics.
 
-- `npm run unit`: Unit tests run in PhantomJS with [Karma](http://karma-runner.github.io/0.13/index.html) + [Mocha](http://mochajs.org/) + [karma-webpack](https://github.com/webpack/karma-webpack).
+- `npm run unit`: Unit tests run in [JSDOM](https://github.com/tmpvar/jsdom) with [Jest](https://facebook.github.io/jest/), or in PhantomJS with Karma + Mocha + karma-webpack.
   - Supports ES2015+ in test files.
-  - Supports all webpack loaders.
-  - Easy mock injection.
+  - Easy mocking.
 
 - `npm run e2e`: End-to-end tests with [Nightwatch](http://nightwatchjs.org/).
   - Run tests in multiple browsers in parallel.

docs/commands.md

@@ -23,11 +23,10 @@ All build commands are executed via [NPM Scripts](https://docs.npmjs.com/misc/sc
 
 ### `npm run unit`
 
-> Run unit tests in PhantomJS with [Karma](https://karma-runner.github.io/). See [Unit Testing](unit.md) for more details.
+> Run unit tests in JSDOM with [Jest](https://facebook.github.io/jest/docs/getting-started.html). See [Unit Testing](unit.md) for more details.
 
 - Supports ES2015+ in test files.
-- Supports all webpack loaders.
-- Easy [mock injection](http://vuejs.github.io/vue-loader/en/workflow/testing-with-mocks.html).
+- Easy [mocking](https://facebook.github.io/jest/docs/mock-functions.html).
 
 ### `npm run e2e`
 

docs/structure.md

@@ -17,9 +17,10 @@
 ├── static/                     # pure static assets (directly copied)
 ├── test/
 │   └── unit/                   # unit tests
-│   │   ├── specs/              # test spec files
-│   │   ├── index.js            # test build entry file
-│   │   └── karma.conf.js       # test runner config file
+│   │   ├── specs/              # test spec files
+│   │   ├── setup.js            # file that runs before Jest tests
+│   │   ├── index.js            # test build entry file
+│   │   └── karma.conf.js       # test runner config file
 │   └── e2e/                    # e2e tests
 │   │   ├── specs/              # test spec files
 │   │   ├── custom-assertions/  # custom assertions for e2e tests

docs/unit.md

@@ -1,7 +1,25 @@
 # Unit Testing
 
+This project offers two options for unit testing—Jest, and Karma and Mocha.
+
 An overview of the tools used by this boilerplate for unit testing:
 
+## Jest
+
+- [Jest](https://facebook.github.io/jest/): the test runner that launches JSDOM runs the tests and reports the results to us.
+
+### Files
+
+- `setup.js`
+
+  Jest runs this file before it runs the unit tests. It sets the Vue production tip to false.
+
+### Mocking Dependencies
+
+The Jest boilerplate comes with the ability to mock dependencies. See the [mock functions guide](https://facebook.github.io/jest/docs/mock-functions.html) for more details.
+
+## Karma and Mocha
+
 - [Karma](https://karma-runner.github.io/): the test runner that launches browsers, runs the tests and reports the results to us.
 - [karma-webpack](https://github.com/webpack/karma-webpack): the plugin for Karma that bundles our tests using Webpack.
 - [Mocha](https://mochajs.org/): the test framework that we write test specs with.
@@ -10,7 +28,7 @@ An overview of the tools used by this boilerplate for unit testing:
 
 Chai and Sinon are integrated using [karma-sinon-chai](https://github.com/kmees/karma-sinon-chai), so all Chai interfaces (`should`, `expect`, `assert`) and `sinon` are globally available in test files.
 
-And the files:
+### Files
 
 - `index.js`
 
@@ -24,10 +42,10 @@ And the files:
 
   This is the Karma configuration file. See [Karma docs](https://karma-runner.github.io/) for more details.
 
-## Running Tests in More Browsers
+### Running Tests in More Browsers
 
 You can run the tests in multiple real browsers by installing more [karma launchers](https://karma-runner.github.io/1.0/config/browsers.html) and adjusting the `browsers` field in `test/unit/karma.conf.js`.
 
-## Mocking Dependencies
+### Mocking Dependencies
 
-This boilerplate comes with [inject-loader](https://github.com/plasticine/inject-loader) installed by default. For usage with `*.vue` components, see [vue-loader docs on testing with mocks](http://vue-loader.vuejs.org/en/workflow/testing-with-mocks.html).
+The Karma unit test boilerplate comes with [inject-loader](https://github.com/plasticine/inject-loader) installed by default. For usage with `*.vue` components, see [vue-loader docs on testing with mocks](http://vue-loader.vuejs.org/en/workflow/testing-with-mocks.html).

meta.js

@@ -72,7 +72,29 @@ module.exports = {
     },
     "unit": {
       "type": "confirm",
-      "message": "Setup unit tests with Karma + Mocha?"
+      "message": "Setup unit tests"
+    },
+    "runner": {
+      "when": "unit",
+      "type": "list",
+      "message": "Pick a test runner",
+      "choices": [
+        {
+          "name": "Jest",
+          "value": "jest",
+          "short": "jest"
+        },
+        {
+          "name": "Karma and Mocha",
+          "value": "karma",
+          "short": "karma"
+        },
+        {
+          "name": "none (configure it yourself)",
+          "value": "noTest",
+          "short": "noTest"
+        }
+      ]
     },
     "e2e": {
       "type": "confirm",
@@ -84,7 +106,10 @@ module.exports = {
     ".eslintignore": "lint",
     "config/test.env.js": "unit || e2e",
     "test/unit/**/*": "unit",
-    "build/webpack.test.conf.js": "unit",
+    "test/unit/index.js": "runner === 'karma'",
+    "test/unit/karma.conf.js": "runner === 'karma'",
+    "test/unit/specs/index.js": "runner === 'karma'",
+    "test/unit/setup.js": "runner === 'jest'",
     "test/e2e/**/*": "e2e",
     "src/router/**/*": "router"
   },

template/.babelrc

@@ -8,8 +8,9 @@
   "plugins": ["transform-runtime"],
   "env": {
     "test": {
-      "presets": ["env", "stage-2"],
+      "presets": ["env", "stage-2"]{{#if_eq runner "karma"}},
       "plugins": ["istanbul"]
+      {{/if_eq}}
     }
   }
 }

template/config/index.js

@@ -1,3 +1,4 @@
+
 'use strict'
 // Template version: 1.1.3
 // see http://vuejs-templates.github.io/webpack for documentation.

template/package.json

@@ -7,11 +7,21 @@
   "scripts": {
     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
     "start": "npm run dev",
-    "build": "node build/build.js"{{#unit}},
-    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run"{{/unit}}{{#e2e}},
-    "e2e": "node test/e2e/runner.js"{{/e2e}}{{#if_or unit e2e}},
-    "test": "{{#unit}}npm run unit{{/unit}}{{#unit}}{{#e2e}} && {{/e2e}}{{/unit}}{{#e2e}}npm run e2e{{/e2e}}"{{/if_or}}{{#lint}},
-    "lint": "eslint --ext .js,.vue src{{#unit}} test/unit/specs{{/unit}}{{#e2e}} test/e2e/specs{{/e2e}}"{{/lint}}
+    {{#if_eq runner "jest"}}
+    "unit": "jest test/unit/specs --coverage",
+    {{/if_eq}}
+    {{#if_eq runner "karma"}}
+    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
+    {{/if_eq}}
+    {{#e2e}}
+    "e2e": "node test/e2e/runner.js",{{/e2e}}
+    {{#if_or unit e2e}}
+    "test": "{{#unit}}npm run unit{{/unit}}{{#unit}}{{#e2e}} && {{/e2e}}{{/unit}}{{#e2e}}npm run e2e{{/e2e}}",
+    {{/if_or}}
+    {{#lint}}
+    "lint": "eslint --ext .js,.vue src{{#unit}} test/unit/specs{{/unit}}{{#e2e}} test/e2e/specs{{/e2e}}",
+    {{/lint}}
+    "build": "node build/build.js"
   },
   "dependencies": {
     "vue": "^2.5.2"{{#router}},
@@ -50,12 +60,18 @@
     {{/if_eq}}
     {{/lint}}
     "eventsource-polyfill": "^0.9.6",
+    "express": "^4.14.1",
     "extract-text-webpack-plugin": "^3.0.0",
     "file-loader": "^1.1.4",
     "friendly-errors-webpack-plugin": "^1.6.1",
     "html-webpack-plugin": "^2.30.1",
     "webpack-bundle-analyzer": "^2.9.0",
-    {{#unit}}
+    {{#if_eq runner "jest"}}
+    "babel-jest": "^21.0.2",
+    "jest": "^21.2.0",
+    "vue-jest": "^1.0.2",
+    {{/if_eq}}
+    {{#if_eq runner "karma"}}
     "cross-env": "^5.0.1",
     "karma": "^1.4.1",
     "karma-coverage": "^1.1.1",
@@ -73,7 +89,7 @@
     "inject-loader": "^3.0.0",
     "babel-plugin-istanbul": "^4.1.1",
     "phantomjs-prebuilt": "^2.1.14",
-    {{/unit}}
+    {{/if_eq}}
     "node-notifier": "^5.1.2",
     {{#e2e}}
     "chromedriver": "^2.27.2",
@@ -85,7 +101,6 @@
     "shelljs": "^0.7.6",
     "optimize-css-assets-webpack-plugin": "^3.2.0",
     "ora": "^1.2.0",
-    "postcss-loader": "^2.0.8",
     "rimraf": "^2.6.0",
     "url-loader": "^0.5.8",
     "vue-loader": "^13.3.0",
@@ -96,6 +111,32 @@
     "webpack-dev-server": "^2.9.1",
     "webpack-merge": "^4.1.0"
   },
+  {{#if_eq runner "jest"}}
+  "jest": {
+    "moduleFileExtensions": [
+      "js",
+      "json",
+      "vue"
+    ],
+    "moduleNameMapper": {
+      "^@/(.*)$": "<rootDir>/src/$1"
+    },
+    "transform": {
+      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
+      ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
+    },
+    "setupFiles": ["<rootDir>/test/unit/setup"],
+    "mapCoverage": true,
+    "collectCoverageFrom" : [
+      "src/**/*.{js,vue}",
+      "!src/main.js",
+      {{#router}}
+      "!src/router/index.js",
+      {{/router}}
+      "!**/node_modules/**"
+    ]
+  },
+  {{/if_eq}}
   "engines": {
     "node": ">= 4.0.0",
     "npm": ">= 3.0.0"

template/src/components/HelloWorld.vue

@@ -36,17 +36,14 @@ export default {
 h1, h2 {
   font-weight: normal;
 }
-
 ul {
   list-style-type: none;
   padding: 0;
 }
-
 li {
   display: inline-block;
   margin: 0 10px;
 }
-
 a {
   color: #42b983;
 }

template/src/router/index.js

@@ -8,7 +8,7 @@ export default new Router({
   routes: [
     {
       path: '/',
-      name: 'Hello',
+      name: 'HelloWorld',
       component: HelloWorld{{#if_eq lintConfig "airbnb"}},{{/if_eq}}
     }{{#if_eq lintConfig "airbnb"}},{{/if_eq}}
   ]{{#if_eq lintConfig "airbnb"}},{{/if_eq}}