最近研究vue项目的自动化测试，网上有很多教程，因此也是一个坑一个坑的踩，差一点就从开始到放弃了，最后又仔细研究了一下，终于成功了，这篇主要用来记录成功过程。如有不对，望各位大神多多指教。
-
新建vue项目并默认开启unit tests和e2e tests
image.png
列举一下用到的开源项目：
（1）karam:
是一个基于Node.js的JavaScript测试执行过程管理工具（Test Runner）。该工具可用于测试所有主流Web浏览器，也可集成到CI（Continuous integration）工具，也可和其他代码编辑器一起使用。这个测试工具的一个强大特性就是，它可以监控(Watch)文件的变化，然后自行执行，通过console.log显示测试结果。
（2）mocha: [用来描述测试用例]
是一款功能丰富的javascript单元测试框架，它既可以运行在nodejs环境中，也可以运行在浏览器环境中。
（3）nightwatch:
是一套基于Node.js的测试框架，使用Selenium WebDriver API以将Web应用测试自动化。它提供了简单的语法，支持使用JavaScript和CSS选择器，来编写运行在Selenium服务器上的端到端测试。
（4）phantomjs: [作为运行环境来跑测试用例]
一个基于webkit内核的无头浏览器，即没有UI界面，即它就是一个浏览器，只是其内的点击、翻页等人为相关操作需要程序设计实现。
[注: 如果你之间没有安装过phantom,phantomjs的依赖会比较难装.如果phantomjs装不上可以尝试使用chrome作为运行环境，这需要安装 "karma-chrome-launcher"，需要修改配置文件]
（5）sinon-chai: [用来断言]
是 sinon和chai这两个断言库的结合，提供丰富的断言方法 -
npm run unit 跑一下unit tests
运行结果：
image.png
此时的目录结构：
image.png - src/test/unit/index.js 文件配置如下（基本上不用修改）
import Vue from 'vue'
Vue.config.productionTip = false
// 加载所有的测试用例、 testsContext.keys().forEach(testsContext)这种写法是webpack中的加载目录下所有文件的写法
const testsContext = require.context('./specs', true, /\.spec$/)
testsContext.keys().forEach(testsContext)
// 加载所有代码文件，方便统计代码覆盖率
const srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/)
srcContext.keys().forEach(srcContext)
-
src/test/karma.conf.js 文件配置如下 （基本上不用修改）
注：我使用的是 Chrome作为运行环境，所以又安装了 " karma-chrome-launcher"
image.png
var webpackConfig = require('../../build/webpack.test.conf')
module.exports = function karmaConfig (config) {
config.set({
// browsers: ['PhantomJS','Chrome'],
browsers: ['Chrome'],
// 默认加载几个框架
frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim'],
// 使用那些汇报框架
reporters: ['spec', 'coverage'],
// 预加载文件
files: ['./index.js'],
// 预处理
preprocessors: {
'./index.js': ['webpack', 'sourcemap']
},
// webpack 配置
webpack: webpackConfig,
webpackMiddleware: {
noInfo: true
},
// coverage 配置
coverageReporter: {
dir: './coverage',
reporters: [
{ type: 'lcov', subdir: '.' },
{ type: 'text-summary' }
]
}
})
}
此时的 package.json 配置如下（若有缺少使用npm安装）：
- 修改 src/components/HelloWorls.vue 文件，测试代码覆盖率
HelloWorls.vue组件修改如下：
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
console.log('data');
function aa() {
}
if(false) {
console.log('data aa');
}
return {
msg: 'Welcome to Your Vue.js App'
}
},
methods: {
aa() {
console.log('methods aa');
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
</style>
-
npm run unit
image.png
浏览器中打开 src/test/coverage/lcov-report/src/components/index.html文件，可以清晰的看到代码覆盖情况：
image.png
点开HelloWord.vue 更直观的方式展示了哪些代码被覆盖了，哪些没有：
image.png
image.png
