vue项目自动化测试-unit tests

最近研究vue项目的自动化测试，网上有很多教程，因此也是一个坑一个坑的踩，差一点就从开始到放弃了，最后又仔细研究了一下，终于成功了，这篇主要用来记录成功过程。如有不对，望各位大神多多指教。

1. 新建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这两个断言库的结合，提供丰富的断言方法

2. npm run unit 跑一下unit tests
   运行结果：

   
   
   image.png
   
   

   此时的目录结构：

   
   
   image.png
3. 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)

4. 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安装）：

image.png

5. 修改 src/components/HelloWorls.vue 文件，测试代码覆盖率
   HelloWorls.vue组件修改如下：

6. npm run unit

   
   
   image.png
   
   

   浏览器中打开 src/test/coverage/lcov-report/src/components/index.html文件，可以清晰的看到代码覆盖情况：

   
   
   image.png
   
   点开HelloWord.vue 更直观的方式展示了哪些代码被覆盖了，哪些没有：
   
   image.png
   
   
   image.png