test

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 /dist
+/coverage
 
 # local env files
 .env.local

jest.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  preset: '@vue/cli-plugin-unit-jest',
+  "collectCoverage": true,
+	"collectCoverageFrom": ["src/**/*.{js,vue}"]
+}

package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
+    "test:unit": "vue-cli-service test:unit",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
@@ -20,8 +21,10 @@
     "@vue/cli-plugin-babel": "^4.1.0",
     "@vue/cli-plugin-eslint": "^4.1.0",
     "@vue/cli-plugin-router": "^4.1.2",
+    "@vue/cli-plugin-unit-jest": "^4.4.6",
     "@vue/cli-plugin-vuex": "^4.1.2",
     "@vue/cli-service": "^4.1.0",
+    "@vue/test-utils": "^1.0.3",
     "babel-eslint": "^10.0.3",
     "body-parser": "^1.19.0",
     "eslint": "^5.16.0",
@@ -45,7 +48,18 @@
     },
     "parserOptions": {
       "parser": "babel-eslint"
-    }
+    },
+    "overrides": [
+      {
+        "files": [
+          "**/__tests__/*.{j,t}s?(x)",
+          "**/tests/unit/**/*.spec.{j,t}s?(x)"
+        ],
+        "env": {
+          "jest": true
+        }
+      }
+    ]
   },
   "browserslist": [
     "> 1%",

src/components/Kaikeba.vue

@@ -0,0 +1,25 @@
+<template>
+    <div>
+      <span>{{ message }}</span>
+      <button @click="changeMsg">点击</button>
+    </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        message: 'vue-text'
+      }
+    },
+    created () {
+      this.message = '开课吧'
+    },
+    methods:{
+        changeMsg(){
+            this.message = '按钮点击'
+
+        }
+    }
+  }
+</script>

tests/unit/example.spec.js

@@ -0,0 +1,12 @@
+import { shallowMount } from '@vue/test-utils'
+import HelloWorld from '@/components/HelloWorld.vue'
+
+describe('HelloWorld.vue', () => {
+  it('renders props.msg when passed', () => {
+    const msg = 'new message'
+    const wrapper = shallowMount(HelloWorld, {
+      propsData: { msg }
+    })
+    expect(wrapper.text()).toMatch(msg)
+  })
+})

tests/unit/kaikeba.spec.js

@@ -0,0 +1,44 @@
+import Kaikeba from '@/components/Kaikeba.vue'
+import {mount} from '@vue/test-utils'
+
+function add(n1,n2){
+  return n1+n2
+}
+
+// 测试套件
+describe('Kaikeba.vue', () => {
+  // 测试用例
+  test('测试add函数', () => {
+    // 断言
+    // expect(add(1,3)).toBe(3)
+    expect(add(1,3)).toBe(4)
+    expect(add(-2,3)).toBe(1)
+  })
+
+  test('要求组件必须有created选项', () => {
+    expect(typeof Kaikeba.created).toBe('function')
+
+    const defData = Kaikeba.data()
+    expect(defData.message).toBe('vue-text')
+  })
+
+
+  test('挂载之后data应该是开课吧', () => {
+    const wrapper = mount(Kaikeba)
+    const vm = wrapper.vm
+    expect(vm.message).toBe('开课吧')
+  })
+
+  test('按钮点击之后', () => {
+    const wrapper = mount(Kaikeba)
+    wrapper.find('button').trigger('click')
+    // 模仿jq获取内部元素内容
+    const html = wrapper.find('span').html()
+    setTimeout(() => {
+      expect(html).toBe('<span>按钮点击</span>')
+    }, 0);
+
+  })
+
+
+})