Replace Karma + Mocha with Jest

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/).
   - 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,7 @@
 ├── 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
 │   └── e2e/                    # e2e tests
 │   │   ├── specs/              # test spec files
 │   │   ├── custom-assertions/  # custom assertions for e2e tests

docs/unit.md

@@ -2,32 +2,8 @@
 
 An overview of the tools used by this boilerplate for unit testing:
 
-- [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.
-- [Chai](http://chaijs.com/): test assertion library that provides better assertion syntax.
-- [Sinon](http://sinonjs.org/): test utility library that provides spies, stubs and mocks.
-
-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:
-
-- `index.js`
-
-  This is the entry file used by `karma-webpack` to bundle all the test code and source code (for coverage purposes). You can ignore it for the most part.
-
-- `specs/`
-
-  This directory is where you write your actual tests. You can use full ES2015+ and all supported Webpack loaders in your tests.
-
-- `karma.conf.js`
-
-  This is the Karma configuration file. See [Karma docs](https://karma-runner.github.io/) for more details.
-
-## 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`.
+- [Jest](https://facebook.github.io/jest/): the test runner that launches JSDOM runs the tests and reports the results to us.
 
 ## 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).
+Jest comes with the ability to mock dependencies. See the [mock functions guide](https://facebook.github.io/jest/docs/mock-functions.html) for more details.

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

@@ -5,13 +5,23 @@
   "author": "{{ author }}",
   "private": true,
   "scripts": {
-    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
+    "dev": "node build/dev-server.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}},
@@ -29,6 +39,7 @@
     "babel-preset-stage-2": "^6.22.0",
     "babel-register": "^6.22.0",
     "chalk": "^2.0.1",
+    "connect-history-api-fallback": "^1.3.0",
     "copy-webpack-plugin": "^4.0.1",
     "css-loader": "^0.28.0",
     {{#lint}}
@@ -50,12 +61,19 @@
     {{/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",
+    "http-proxy-middleware": "^0.17.3",
     "webpack-bundle-analyzer": "^2.9.0",
-    {{#unit}}
+    {{#if_eq runner "jest"}}
+    "babel-jest": "^21.0.2",
+    "jest": "^21.2.0",
+    "vue-jest": "^1.0.1",
+    {{/if_eq}}
+    {{#if_eq runner "karma"}}
     "cross-env": "^5.0.1",
     "karma": "^1.4.1",
     "karma-coverage": "^1.1.1",
@@ -73,8 +91,7 @@
     "inject-loader": "^3.0.0",
     "babel-plugin-istanbul": "^4.1.1",
     "phantomjs-prebuilt": "^2.1.14",
-    {{/unit}}
-    "node-notifier": "^5.1.2",
+    {{/if_eq}}
     {{#e2e}}
     "chromedriver": "^2.27.2",
     "cross-spawn": "^5.0.1",
@@ -83,19 +100,46 @@
     {{/e2e}}
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",
+    "opn": "^5.1.0",
     "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",
     "vue-style-loader": "^3.0.1",
     "vue-template-compiler": "^2.5.2",
     "portfinder": "^1.0.13",
     "webpack": "^3.6.0",
-    "webpack-dev-server": "^2.9.1",
+    "webpack-dev-middleware": "^1.12.0",
+    "webpack-hot-middleware": "^2.18.2",
     "webpack-merge": "^4.1.0"
   },
+  {{#unit}}
+  "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/**"
+    ]
+  },
+  {{/unit}}
   "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,11 @@ export default new Router({
   routes: [
     {
       path: '/',
+<<<<<<< HEAD
+      name: 'HelloWorld',
+=======
       name: 'Hello',
+>>>>>>> 89c6fb18d4640afd6a5e89106b2493b4465d36a3
       component: HelloWorld{{#if_eq lintConfig "airbnb"}},{{/if_eq}}
     }{{#if_eq lintConfig "airbnb"}},{{/if_eq}}
   ]{{#if_eq lintConfig "airbnb"}},{{/if_eq}}

template/test/unit/.eslintrc

@@ -1,9 +1,5 @@
 {
   "env": {
-    "mocha": true
-  },
-  "globals": {
-    "expect": true,
-    "sinon": true
+    "jest": true
   }
 }

template/test/unit/setup.js

@@ -0,0 +1,3 @@
+import Vue from 'vue'
+
+Vue.config.productionTip = false

template/test/unit/specs/Hello.spec.js → template/test/unit/specs/HelloWorld.spec.js

@@ -6,6 +6,6 @@ describe('HelloWorld.vue', () => {
     const Constructor = Vue.extend(HelloWorld){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
     const vm = new Constructor().$mount(){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
     expect(vm.$el.querySelector('.hello h1').textContent)
-      .to.equal('Welcome to Your Vue.js App'){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
+    {{#if_eq runner "karma"}}.to.equal('Welcome to Your Vue.js App'){{#if_eq lintConfig "airbnb"}};{{/if_eq}}{{/if_eq}}{{#if_eq runner "jest"}}.toEqual('Welcome to Your Vue.js App'){{#if_eq lintConfig "airbnb"}};{{/if_eq}}{{/if_eq}}
   }){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
 }){{#if_eq lintConfig "airbnb"}};{{/if_eq}}