赞
踩
单元测试
(unit testing),是指对软件中的最小可测试单元进行检查和验证。在提供了经过测试的单元的情况下,系统集成过程将会大大地简化。开发人员可以将精力集中在单元之间的交互作用和全局的功能实现上,而不是陷入充满很多Bug的单元之中不能自拔。
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% 的功能。
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.js 官方的单元测试实用工具库, 支持主流js测试运行器,是一个基于包裹器
的 API,同步触发事件。因此 Vue.nextTick 不是必须的。
vue.2.0老项目默认已经安装并配置好了 webpack、vue-loader 和 Babel,可以通过下面的方法添加测试模块
安装依赖
- # 安装 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
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。