v1.2.0

Author: LinusBorg

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 .DS_Store
 docs/_book
+test/

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/e2e.md

@@ -10,7 +10,7 @@ Let's take a look at the files in the `test/e2e` directory:
 
 - `nightwatch.conf.js`
 
-  Nightwatch configuration file. See [Nightwatch's docs on configuration](http://nightwatchjs.org/guide#settings-file) for more details.
+  Nightwatch configuration file. See [Nightwatch's docs on configuration](http://nightwatchjs.org/gettingstarted#settings-file) for more details.
 
 - `custom-assertions/`
 

docs/pre-processors.md

@@ -1,6 +1,6 @@
 # Pre-Processors
 
-This boilerplate has pre-configured CSS extraction for most popular CSS pre-processors including LESS, SASS, Stylus, and PostCSS. To use a pre-processor, all you need to do is installing the appropriate webpack loader for it. For example, to use SASS:
+This boilerplate has pre-configured CSS extraction for most popular CSS pre-processors including LESS, SASS, Stylus, and PostCSS. To use a pre-processor, all you need to do is install the appropriate webpack loader for it. For example, to use SASS:
 
 ``` bash
 npm install sass-loader node-sass --save-dev

docs/static.md

@@ -6,9 +6,9 @@ You will notice in the project structure we have two directories for static asse
 
 To answer this question, we first need to understand how Webpack deals with static assets. In `*.vue` components, all your templates and CSS are parsed by `vue-html-loader` and `css-loader` to look for asset URLs. For example, in `<img src="./logo.png">` and `background: url(./logo.png)`, `"./logo.png"` is a relative asset path and will be **resolved by Webpack as a module dependency**.
 
-Because `logo.png` is not JavaScript, when treated as a module dependency, we need to use `url-loader` and `file-loader` to process it. This boilerplate has already configured these loaders for you, so you basically get features such as filename fingerprinting and conditional base64 inlining for free, while being able to use relative/module paths without worrying about deployment.
+Because `logo.png` is not JavaScript, when treated as a module dependency, we need to use `url-loader` and `file-loader` to process it. This template has already configured these loaders for you, so you get features such as filename fingerprinting and conditional base64 inlining for free, while being able to use relative/module paths without worrying about deployment.
 
-Since these assets may be inlined/copied/renamed during build, they are essentially part of your source code. This is why it is recommended to place Webpack-processed static assets inside `/src`, along side other source files. In fact, you don't even have to put them all in `/src/assets`: you can organize them based on the module/component using them. For example, you can put each component in its own directory, with its static assets right next to it.
+Since these assets may be inlined/copied/renamed during build, they are essentially part of your source code. This is why it is recommended to place Webpack-processed static assets inside `/src`, alongside other source files. In fact, you don't even have to put them all in `/src/assets`: you can organize them based on the module/component using them. For example, you can put each component in its own directory, with its static assets right next to it.
 
 ### Asset Resolving Rules
 

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,6 +1,26 @@
 # Unit Testing
 
-An overview of the tools used by this boilerplate for unit testing:
+This project offers two options for unit testing:
+
+1. Jest
+2. Karma and Mocha.
+
+
+## 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.
@@ -10,7 +30,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 +44,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

@@ -54,7 +54,7 @@ module.exports = {
       "message": "Pick an ESLint preset",
       "choices": [
         {
-          "name": "Standard (https://github.com/feross/standard)",
+          "name": "Standard (https://github.com/standard/standard)",
           "value": "standard",
           "short": "Standard"
         },
@@ -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": "unit && runner === 'karma'",
+    "test/unit/karma.conf.js": "unit && runner === 'karma'",
+    "test/unit/specs/index.js": "unit && runner === 'karma'",
+    "test/unit/setup.js": "unit && runner === 'jest'",
     "test/e2e/**/*": "e2e",
     "src/router/**/*": "router"
   },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-cli-template-webpack",
-  "version": "2.0.0",
+  "version": "1.2.0",
   "license": "MIT",
   "description": "A full-featured Webpack setup with hot-reload, lint-on-save, unit testing & css extraction.",
   "scripts": {

template/.babelrc

@@ -1,18 +1,16 @@
 {
   "presets": [
     ["env", {
-      "modules": false,
-      "targets": {
-        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
-      }
+      "modules": false
     }],
     "stage-2"
   ],
   "plugins": ["transform-runtime"],
   "env": {
     "test": {
-      "presets": ["env", "stage-2"],
+      "presets": ["env", "stage-2"]{{#if_eq runner "karma"}},
       "plugins": ["istanbul"]
+      {{/if_eq}}
     }
   }
 }

template/.eslintignore

@@ -1,2 +1,7 @@
-build/*.js
-config/*.js
+/build/
+/config/
+/dist/
+/*.js
+{{#unit}}
+/test/unit/coverage/
+{{/unit}}

template/.gitignore

@@ -1,14 +1,14 @@
 .DS_Store
 node_modules/
-dist/
+/dist/
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 {{#unit}}
-test/unit/coverage
+/test/unit/coverage/
 {{/unit}}
 {{#e2e}}
-test/e2e/reports
+/test/e2e/reports/
 selenium-debug.log
 {{/e2e}}