浅谈vue单元测试最佳实践（上）

lsekfe

一、为什么要进行单元测试
　　·单元测试可以作为描述组件行为的文档
　　· 降低人工测试的时间
　　· 减少迭代或者优化产生的bug
　　· 改进设计&促进重构
　　二、如何使用Vue Test Utils对Vue组件进行单元测试
　　Vue官方推荐使用Vue Test Utils对单文件组件单元测试。
　　Vue Test Utils 会将单文件组件隔离挂载，然后模拟必要的输入 (prop、注入和用户事件) 和对输出 (渲染结果、触发的自定义事件) 的断言来测试 Vue 组件。
　　被挂载的组件会返回到一个包裹器内，而包裹器会暴露很多封装、遍历和查询其内部的 Vue 组件实例的便捷的方法。
　　单文件组件单元测试流程图如下：

　　下面将介绍如何使用官方推荐方案搭建单元测试的环境
　　1 、选择测试运行器
　　测试运行器是执行测试集的程序。主流的JavaScript测试运行器比较多，且Vue Test Utils都支持。Vue Test Utils是与测试运行器无关的。
　　那我们该如何从众多测试运行器选择呢？需要关注以下几点：
　　· 测试运行器给我们提供的功能集合是否足够强大
　　· 性能
　　· 对单文件组价预编译的支持
　　Vue Test Utils推荐以下两个测试运行器
　　Jest是功能最全的测试运行器。它需要的配置是最少的，默认安装了JSDOM，内置断言命令行的用户体验非常好。 不过需要一个将Vue单文件组件预处理器，这样Jest才可以处理。Vue Test Utils为我们提供了vue-jest预处理器来处理最常见的单文件组件特性，注意不是100%的vue-loader。
　　mocha-webpack是一个webpack + Mocha的包裹器。同时包含了更顺畅的接口和侦听模式。这些设置的好处是我们可以通过webpack+vue-loader得到完整的单文件组件支持，但是需要很多配置。
　　2、浏览器环境支持
　　Vue Test Utils依赖浏览器环境。技术上讲你可以将其运行在一个真实的浏览器环境，但不推荐，因为在不同的平台都启动真实的浏览器是很复杂的。
　　推荐是用JSDOM在Node虚拟浏览器环境运行测试。
　　Jest测试运行器内置了JSDOM。对于其他的测试运行器，你可以在你测试的入口使用jsdom-global手动设置JSDOM。
　<b>　npm install --save-dev jsdom jsdom-global</b>

　　// 在测试的入口中设置
　　require('jsdom-global')()


　　3、单文件组件单元测试环境配置
　　Vue的单文件组件在他们运行于Node或者浏览器之前需要预编译。有两种方式来做预编译，通过vue-jest预编译器或者通过webpack
　　vue-jest预处理器支持基本的单文件组件功能，但是目前不支持处理样式块和自定义块，这些都需要vue-loader+webpack支持。
　　Jest&@vue/test-utils
　　对Vue2项目推荐以下版本，可以直接运行起来
　　npm i -D @vue/test-utils@1.3.0 jest@24.9.0

　　配置文件
　　{
　　  "scripts": {
　　    "test": "jest"
　　  }
　　}


　　·vue-jest
　　vue-jest是用来处理单文件组件的
　　npm i -D vue-jest@4.0.1

　　配置文件
　　{
　　  // ...
　　  "jest": {
　　    "moduleFileExtensions": [
　　      "js",
　　      "json",
　　      // 告诉 Jest 处理 `*.vue` 文件
　　      "vue"
　　    ],
　　    "transform": {
　　      // 用 `vue-jest` 处理 `*.vue` 文件
　　      ".*\\.(vue)$": "vue-jest"
　　    }
　　  }
　　}


　　如果你的Babel版本高于7还需安装 babel-bridge
　　npm install --save-dev babel-core@^7.0.0-bridge.0

　　对于比较老的项目
　　npm install --save-dev  babel-core@^7.0.0-bridge.0  @babel/plugin-transform-runtime

　　.babelrc配置如下：
　　{
　　  "presets": [
　　    ["@babel/preset-env", {
　　      "useBuiltIns": false,
　　    }],
　　  ],
　　  "plugins": ["@babel/plugin-transform-runtime"]
　　}


　　·处理 webpack 别名
　　如果你在 webpack 中配置了别名解析，比如把 @ 设置为 /src 的别名，那么你也需要用 moduleNameMapper 选项为 Jest 增加一个匹配配置：
　　{
　　  // ...
　　  "jest": {
　　    // ...
　　    // 支持源代码中相同的 `@` -> `src` 别名
　　    "moduleNameMapper": {
　　      "^@/(.*)$": "<rootDir>/src/$1"
　　    }
　　  }
　　}


　　·为 Jest 配置 Babel
　　尽管最新版本的 Node 已经支持绝大多数的 ES2015 特性，你可能仍然想要在你的测试中使用 ES modules 语法和 stage-x 的特性。为此我们需要安装 babel-jest：
　　npm i -D babel-jest@24.9.0

　　配置如下：
　　{
　　transform: {
　　    "^.+\\.js$": "<rootDir>/node_modules/babel-jest"
　　  }
　　}


　　最后完整的jest.conf.js的配置如下：
　　// ./test/unit/jest.conf.js
　　const path = require('path');
　　module.exports = {
　　  rootDir: path.resolve(__dirname, '../../'), // 类似 webpack.context
　　  "collectCoverage": true,
　　  moduleFileExtensions: [ // 类似 webpack.resolve.extensions
　　    'js',
　　    'json',
　　    'vue',
　　  ],
　　  moduleNameMapper: {
　　    '^@/(.*)$': '<rootDir>/src/$1', // 类似 webpack.resolve.alias
　　  },
　　  transform: { // 类似 webpack.module.rules
　　    '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
　　    // '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest',
　　    ".*\\.(vue)$": '<rootDir>/node_modules/vue-jest',
　　  },
　　  setupFiles: ['<rootDir>/test/unit/setup'], // 类似 webpack.entry
　　  coverageDirectory: '<rootDir>/test/unit/coverage', // 类似 webpack.output
　　  collectCoverageFrom: [ // 类似 webpack 的 rule.include
　　    'src/components/__test__/*.{js}',
　　    '!src/main.js',
　　    '!src/router/index.js',
　　    '!**/node_modules/**',
　　  ],
　　  transformIgnorePatterns: ['/node_modules/']
　　};


　　目录结构如下：

　　·setup.js入口文件
　　import Vue from 'vue'
　　Vue.config.productionTip = false;


　　这样单元测试的配置文件就完成了~