Vue Test Utils

单元测试（unit testing），是指对软件中的最小可测试单元进行检查和验证。在提供了经过测试的单元的情况下，系统集成过程将会大大地简化。开发人员可以将精力集中在单元之间的交互作用和全局的功能实现上，而不是陷入充满很多Bug的单元之中不能自拔。

流行框架

1. jest

​Jest 是一个由 facebook 开发的测试运行器，内置Jsdom、断言库和mock，vue-test-utils 官网评价

• jsdom 由纯javascript实现的一系列 web标准，特别是 WHATWG（Web Hypertext Application Technology Working Group /Web超文本应用技术工作组）组织制定的DOM和HTML标准， 项目的目标是模拟足够的Web浏览器子集

Jest 是功能最全的测试运行器。它所需的配置是最少的，默认安装了 JSDOM，内置断言且命令行的用户体验非常好。不过你需要一个能够将单文件组件导入到测试中的预处理器。我们已经创建了 vue-jest 预处理器来处理最常见的单文件组件特性，但仍不是 vue-loader 100% 的功能。

2. karma + mocha + chai + sinon

Karma 是一个启动浏览器运行测试并生成报告的测试运行器

Mocha 是一个在node.js 和浏览器上运行的功能丰富的JavaScript测试框架, 能良好的支持javascript异步的单元测试

Chai 是一个适用node.js和浏览器端的 BDD（行为） / TDD 断言库

• TDD (Test-Driven Development) 测试驱动开发，注重测试逻辑

• BDD (Behaviour-Driven Development) 行为驱动开发， 注重输出结果

Sinon 是一个独立的 JavaScript 测试spy, stub, mock库，没有依赖任何单元测试框架工程

• spy (监听) 生成一个间谍函数，记录下函数调用的参数，返回值，this的值，以及抛出的异常

• stub (存根) 用简单的行为替换复杂的行为，例如父子组件调用，但是子组件没有完成，可以用一个stub替代，告诉父组件这里有一个子组件

• mock (模仿）生成代码中使用的假数据对象，验证预期

vue test utils

vue test utils 是 Vue.js 官方的单元测试实用工具库, 支持主流js测试运行器，是一个基于包裹器的 API，同步触发事件。因此 Vue.nextTick 不是必须的。

安装

vue.2.0老项目默认已经安装并配置好了 webpack、vue-loader 和 Babel，可以通过下面的方法添加测试模块

1. 使用 jest 测试单文件组件

安装依赖

​# 安装 jest @vue/test-utils
npm install --save-dev jest @vue/test-utils

# 安装vue-jest， 在 Jest 中处理vue文件需要安装 vue-jest 预处理器：
npm install --save-dev vue-jest

# 安装 babel-jest
npm install --save-dev babel-jest

# 安装 jest 快照插件
npm install --save-dev jest-serializer-vue

在根目录新建 test/unit 目录，添加 jest 配置文件 jest.conf.js

const path = require('path')

module.exports = { 
  rootDir: path.resolve(__dirname, '../../'),  
  moduleFileExtensions: [   
    'js',    
    'json',    
    // 告诉 Jest 处理 `*.vue` 文件
    'vue'
  ],  
  moduleNameMapper: {   
     // 用 `vue-jest` 处理 `*.vue` 文件
    '^@/(.*)$': '<rootDir>/src/$1'
  },  
  transform: {  
    '^.+\\.js$': '<rootDir>/node_modules/babel-jest', // 用 `babel-jest` 处理 `*.js` 文件
    '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest' // 用 `vue-jest` 处理 `*.vue` 文件
  }, 
  snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'], // 快照插件
  setupFiles: ['<rootDir>/test/unit/setup'], // 在每次测试之前运行一些代码来配置或设置测试环境
  verbose: true,  
  testURL: 'http://localhost/', 
  collectCoverage: true, // 打开代码覆盖率收集功能
  coverageDirectory: '<rootDir>/test/unit/coverage', // 生成代码覆盖率报告文件夹目录
  // 定义需要收集测试覆盖率信息的文件路径
  collectCoverageFrom: [   
    'src/**/*.{js,vue}',    
    '!src/main.js',    
    '!src/router/index.js',    
    '!**/node_modules/**'
  ],  
  // 测试覆盖率报告模版
  coverageReporters: ['html', 'text-summary']
}

配置 test/unit/setup.js 文件, 不是必须

import Vue from 'vue'
// 去除生产环境警告
Vue.config.productionTip = false

配置测试环境 .babelrc

{
  ...
  "env": {
    "test": {
      "presets": [
        ["env", { "targets": { "node": "current" }}]
      ]
    }
  }
}

配置 package.json 测试脚本

// package.json
{
  "scripts": {
    "unit": "jest --config test/unit/jest.conf.js --coverage --updateSnapshot"
  }
}

当被测试内容修改后，重新生成快照片会报错，加上 --updateSnapshot 可以消除

测试文件可以放在 test/unit/spec/ 文件下，命名方式如 *.spec.js 或 *.test.js，je