Add Jest as new unit test runner, keep Karma + Mocha as a fallback (v…

…uejs-templates#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 (vuejs-templates#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. (vuejs-templates#986) * switch hello-world tag to PascalCase (vuejs-templates#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 (vuejs-templates#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 (vuejs-templates#984) - vue 2.5 - vue-router 3.0 * Fix missing dependency bumps (vuejs-templates#987) * switch hello-world tag to PascalCase (vuejs-templates#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 (vuejs-templates#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 (vuejs-templates#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
shenron · Nov 12, 2017 · 1ce066c · 1ce066c
1 parent 166e5fa
commit 1ce066c
Show file tree

Hide file tree

Showing 14 changed files with 121 additions and 34 deletions.
diff --git a/README.md b/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.

diff --git a/docs/commands.md b/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`
 

diff --git a/docs/structure.md b/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

diff --git a/docs/unit.md b/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).
diff --git a/meta.js b/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"
   },

diff --git a/template/.babelrc b/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}}
     }
   }
 }
diff --git a/template/config/index.js b/template/config/index.js
@@ -1,3 +1,4 @@
+
 'use strict'
 // Template version: 1.1.3
 // see http://vuejs-templates.github.io/webpack for documentation.

diff --git a/template/package.json b/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"

diff --git a/template/src/components/HelloWorld.vue b/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;
 }

diff --git a/template/src/router/index.js b/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}}

diff --git a/template/test/unit/.eslintrc b/template/test/unit/.eslintrc
@@ -1,9 +1,11 @@
 {
-  "env": {
-    "mocha": true
-  },
+  "env": {{{#if_eq runner "karma"}}
+    "mocha": true{{/if_eq}}{{#if_eq runner "jest"}}
+    "jest"{{/if_eq}}
+  }{{#if_eq runner "karma"}},
   "globals": {
     "expect": true,
-    "sinon": true
-  }
+    "sinon": true,
+    "jest": true
+  }{{/if_eq}}
 }
diff --git a/template/test/unit/setup.js b/template/test/unit/setup.js
@@ -0,0 +1,3 @@
+import Vue from 'vue'
+
+Vue.config.productionTip = false
diff --git a/template/test/unit/specs/Hello.spec.js → template/test/unit/specs/HelloWorld.spec.js b/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}}
diff --git a/test.sh b/test.sh