自动化测试（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