自動化測試（vue-cli4）

一、安裝

二、單元測試（jest）

1.測試方法

在src中新建utils.js：

export function add(x, y) {
	return x + y;
}

在test/emaple.spec.js中寫測試代碼： 

import { add } from '../../src/utils'
describe('測試加法函數', () => {
	it('具體的功能測試， 測試數字相加', () => {
		expect( add(1, 2) ).toBe(3);  //期待add(1, 2)爲3
	})
	it('具體的功能測試， 測試數字字符串和數字相加', () => {
		expect( add('1', 2) ).toBe('12');
	})
	it('具體的功能測試， 測試數字和數字字符串相加', () => {
		expect( add(1, '2') ).toBe('12');
	})
	it('具體的功能測試， 測試數字字符串相加', () => {
		expect( add('1', '2') ).toBe('12');
	})
})

測試：

npm run test:unit

 

2.測試組件

在src/components中新建Mine.vue:

<template>
	<div>
		<span>{{msg}}</span>
		<button @click="changeMsg" class="btn">改變</button>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				msg: 'vue-test',
				count: 1
			}
		},
		created() {
			this.msg = 'msgChange'
		},
		mounted() {
			this.msg = 'mountedChange'
		},
		methods: {
			changeMsg() {
				if(this.count > 1) {
					this.msg = 'countChange'
				} else {
					this.msg = 'buttonChange'
				}
			}
		}
	}
</script>

在test/unit中新建mine.spec.js(測試代碼默認後綴爲.spec.js):

// 測試vue組件，需引入vue，就是在node層解析組件
import Vue from 'vue'
import Mine from '../../src/components/Mine.vue'
// @vue/test-utils插件中的掛載方法
import { mount } from '@vue/test-utils'


describe('測試Mine組件', () => {
	it('測試初始的data', () => {
		expect( Mine.data().msg ).toBe('vue-test')
	})

	it('測試Mine組件掛載後(mounted)的數據改變', () => {
		let vm = new Vue(Mine).$mount();
		expect( vm.msg ).toBe('mountedChange')
	})

	it('測試Mine組件按鈕點擊後的數據改變', () => {
		// 掛載後mounted
		let wrapper = mount(Mine);
		expect( wrapper.vm.msg ).toBe('mountedChange')

		// 點擊
		wrapper.find('.btn').trigger('click')
		expect(wrapper.vm.msg).toBe('buttonChange')
	})
})

測試：

 

3.查看測試代碼的覆蓋率：

在package.json中：

"jest": {
    "preset": "@vue/cli-plugin-unit-jest",
    "collectCoverage": true,
    "collectCoverageFrom": ["src/**/*.{js,vue}"],
    "moduleFileExtensions": [
      "js",
      "jsx",
      "json",
      "vue"
    ]
  }

測試：生成coverage文件夾，裏面的index.html是可視化測試代碼覆蓋報告

解析：utils.js測試代碼覆蓋率100%， Mine.vue測試代碼覆蓋率83.33%

 

三、端對端測試

測試：npm run test:e2e