Now first working Jest tests. Therefore Hello.vue now has a Component property hellomsg, which we can check from within the test. The App also uses the new property and defines the hellomsg.

jonashackt · jonashackt · commit f98d2ead62a7 · 2018-06-27T21:04:38.000+02:00
diff --git a/README.md b/README.md
@@ -477,12 +477,41 @@ https://docs.npmjs.com/getting-started/updating-local-packages
 
 ## Testing 
 
+#### Install vue-test-utils
+
+https://github.com/vuejs/vue-test-utils
+
+`npm install --save-dev @vue/test-utils`
+
 #### Jest
 
 https://facebook.github.io/jest/
 
 Intro-Blogpost: https://blog.codecentric.de/2017/06/javascript-unit-tests-sind-schwer-aufzusetzen-keep-calm-use-jest/
 
+https://github.com/vuejs/vue-test-utils-jest-example
+
+###### Jest Configuration  
+
+* [package.json](frontend/package.json):
+
+```
+"scripts": {
+    ...
+    "unit": "jest --config test/unit/jest.conf.js --coverage",
+    ....
+  },
+```
+
+* [frontend/test/unit/jest.conf.js](frontend/test/unit/jest.conf.js)
+
+###### Run Unit tests
+
+`npm run unit`
+
+Run all tests (incl. E2E): `npm test`
+
+
 #### E2E tests with Nightwatch
 
 http://nightwatchjs.org/
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -22,6 +22,7 @@
     "vue-router": "^3.0.1"
   },
   "devDependencies": {
+    "@vue/test-utils": "^1.0.0-beta.20",
     "autoprefixer": "^7.1.2",
     "babel-core": "^6.26.3",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -1,12 +1,18 @@
 <template>
   <div id="app">
-    <router-view></router-view>
+    <router-view :hellomsg="msg"></router-view>
   </div>
 </template>
 
 <script>
+
 export default {
-  name: 'app'
+  name: 'app',
+  data () {
+    return {
+      msg: 'Welcome to your Vue.js powered Spring Boot App'
+    }
+  }
 }
 </script>
 
diff --git a/frontend/src/components/Hello.vue b/frontend/src/components/Hello.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="hello">
     <img src="./../assets/spring-boot-vuejs-logo.png">
-    <h1>{{ msg }}</h1>
+    <h1>{{ hellomsg }}</h1>
     <h2>See the sources here: </h2>
     <ul>
       <li><a href="https://github.com/jonashackt/spring-boot-vuejs" target="_blank">github.com/jonashackt/spring-boot-vuejs</a></li>
@@ -21,12 +21,7 @@
 <script>
 export default {
   name: 'hello',
-
-  data () {
-    return {
-      msg: 'Welcome to your Vue.js powered Spring Boot App'
-    }
-  }
+  props: { hellomsg: { type: String, required: true } }
 }
 
 </script>
diff --git a/frontend/src/components/User.vue b/frontend/src/components/User.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="service">
+  <div class="user">
     <h1>Create User</h1>
 
     <h3>Just some database interaction...</h3>
@@ -23,7 +23,7 @@
   import {AXIOS} from './http-common'
 
   export default {
-    name: 'service',
+    name: 'user',
 
     data () {
       return {
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
@@ -1,11 +1,11 @@
 import Vue from 'vue'
-import Router from 'vue-router'
+import VueRouter from 'vue-router'
 import Hello from '@/components/Hello'
 import Service from '@/components/Service'
 import Bootstrap from '@/components/Bootstrap'
 import User from '@/components/User'
 
-Vue.use(Router)
+Vue.use(VueRouter)
 
 export default new Router({
   routes: [
diff --git a/frontend/test/unit/.eslintrc b/frontend/test/unit/.eslintrc
@@ -1,9 +1,7 @@
 {
   "env": {
-    "mocha": true
+    "jest": true
   },
   "globals": {
-    "expect": true,
-    "sinon": true
   }
 }
diff --git a/frontend/test/unit/jest.conf.js b/frontend/test/unit/jest.conf.js
@@ -19,7 +19,6 @@ module.exports = {
   ],
   snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
   setupFiles: ['<rootDir>/test/unit/setup'],
-  mapCoverage: true,
   coverageDirectory: '<rootDir>/test/unit/coverage',
   collectCoverageFrom: [
     'src/**/*.{js,vue}',
diff --git a/frontend/test/unit/specs/App.spec.js b/frontend/test/unit/specs/App.spec.js
@@ -0,0 +1,17 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import VueRouter from 'vue-router'
+import App from '@/App';
+
+const localVue = createLocalVue()
+localVue.use(VueRouter)
+const router = new VueRouter()
+
+describe('App component should', () => {
+  it('render without crashing', () => {
+    const wrapper = shallowMount(App, {
+      localVue,
+      router
+    });
+    expect(wrapper.find('hello')).toBeDefined();
+  });
+});
diff --git a/frontend/test/unit/specs/Hello.spec.js b/frontend/test/unit/specs/Hello.spec.js
diff --git a/frontend/test/unit/specs/components/Hello.test.js b/frontend/test/unit/specs/components/Hello.test.js
@@ -0,0 +1,10 @@
+import { shallowMount } from '@vue/test-utils';
+import Hello from '@/components/Hello'
+
+describe('Hello.vue', () => {
+  it('should render correct hello message', () => {
+    const wrapper = shallowMount(Hello, { propsData: { hellomsg: 'Welcome to your Jest powered Vue.js App' } });
+    const contentH1 = wrapper.find('h1');
+    expect(contentH1.text()).toEqual('Welcome to your Jest powered Vue.js App');
+  })
+})
diff --git a/frontend/test/unit/specs/components/User.test.js b/frontend/test/unit/specs/components/User.test.js
@@ -0,0 +1,10 @@
+import { shallowMount } from '@vue/test-utils';
+import User from '@/components/User'
+
+describe('User.vue', () => {
+  it('should render Create User Button', () => {
+    const wrapper = shallowMount(User);
+    const contentButton = wrapper.find('button');
+    expect(contentButton.text()).toEqual('Create User');
+  })
+})

Original file line number	Diff line number	Diff line change
`@@ -1,9 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"env": {`
`3`		`- "mocha": true`
	`3`	`+ "jest": true`
`4`	`4`	`},`
`5`	`5`	`"globals": {`
`6`		`- "expect": true,`
`7`		`- "sinon": true`
`8`	`6`	`}`
`9`	`7`	`}`