前端测试(3) ---单元测试学习记录_网页测试前端操作记录-优快云博客

本文链接：https://blog.youkuaiyun.com/DJCai7/article/details/98437039

本文详述了前端单元测试的重要性，包括BDD和TDD两种模式，并探讨了适合做单元测试的内容。文章以mocha+should.js为主，介绍了如何设置测试框架、断言库，以及使用karma进行测试工具配置。还讨论了mochawesome生成测试报告和Travis CI的集成，最后提到了测试覆盖率的计算方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

单元测试学习记录

单元测试类型

BDD
Behavior Driven Development , 行为驱动开发是一种敏捷软件开发的技术 , 它鼓励软件项目中的开发者、QA和非技术人员或商业参与者之间的协作。
BDD侧重设计 , 其描述的行为就像一个个的故事(Story)，系统业务专家、开发者、测试人员一起合作，分析软件的需求 , 然后将这些需求写成一个个的故事。开发者负责填充这些故事的内容 , 测试者负责检验这些故事的结果。结合场景设置，基本就完成了一个完整测试的定义。
TDD
Test-Driven Development , 测试驱动开发 , 它是一种测试先于编写代码的思想
TDD侧重点偏向开发，通过测试用例来规范约束开发者编写出质量更高、bug更少的代码。

前端为什么要做单元测试

帮助检验代码写的更规范，因为要通过测试就要求单元之间解耦，不然无法通过测试
已经发布了的代码有所改动，如果有单元测试，方便代码回归，省下全局相关功能再测试一遍的低效。
一般测试代码会先于功能代码先写。先写测试代码会考虑功能代码的实现细节，理清功能代码的实现逻辑。

哪些内容适合做单元测试

项目中的库文件，公共组件，是项目的公共引用的功能，不常被改动。一旦有改动，通过测试能及时发现问题，不会导致引用了这个公共功能的地方报错。常常有需求变动的业务代码不适合做单元测试。

学习涉及的测试框架、断言库、测试工具和CI

mocha: 单元测试框架
node内置的assert模块: 断言库 , TDD风格
should.js: 断言库 , 属于BDD风格
chai.js: 断言库 , BDD/TDD风格 , 同时支持should、 assert、expect , 有强大的插件机制
karma: 测试工具 , 可以监控文件的变化 , 然后自行执行 , 通过浏览器控制台显示测试结果 , 能够模拟各种环境来运行你的测试代码比如Chrome, Firefox，mobile等等
Travis CI: 提供持续集成服务（Continuous Integration，简称 CI）。通过配置绑定你github上的项目，并且配置运行环境，实现只要github上有代码更新，travis就会自动运行构建和测试，并反馈运行结果。

单元测试（一）: mocha+should.js

准备

cd ~/desktop
mkdir nodejs-test
cd nodejs-test
mkdir test
mkdir lib

安装模块

npm init -y
npm install mocha --save-dev
npm install should --save-dev

编辑一下 package.json，修改一下 script 下面的 test 的值, 此处mocha为本地安装
```
"test": "./node_modules/mocha/bin/mocha"
```
配置mocha.opts
```
	--require should
```
mocha.opts的更多配置（代替命令行参数）：https://mochajs.org/#mochaopts

添加测试用例

// test/test.js
var add = require('../lib/add');
describe('大数相加add方法', function () {  
	it('字符串"1"加上字符串"2"等于"4"', function () {    
		add('1', '2')      
			.should.equal('4')
   }) 
	it('字符串"42329"加上字符串"21532"等于"63861"', function () {    
		add('42329', '21532')      
			.should.equal('63861')
   })    
	it('"843529812342341234"加上"236124361425345435"等于"1079654173767686669"', function () {    
		add('843529812342341234', '236124361425345435')      
			.should.equal('1079654173767686669')  
	})
})

添加主功能（待测试）代码

// lib/add.js， 该功能仍然可继续优化， 如进行最小切片等
function add(a, b) {
	if(isNaN(a) || isNaN(b)) {
	    console.error(`${a}与${b}应均为数字`)
	}
	// 可以精确表示到个位的最大整数 Math.pow(2, 53)
	const MaxShowNumLen = (Math.pow(2,53) + '').length
	if(maxLen < MaxShowNumLen) {
		 return '' + (Number(a) + Number(b))
	}
	const aList = a.split('').reverse()
	const bList = b.split('').reverse()
	const maxLen = Math.max(aList.length, bList.length)

	let flag = 0
	let cList = []

	 for(let i = 0, l =  maxLen; i < l ; i++ ){
		let tmp = (+aList[i] || 0) + (+bList[i] || 0) + flag
		flag = 0
		if (tmp > 9) {
 			 tmp -= 10
  			flag = 1
		}
		 cList.push(tmp)
	}
	if(flag) {
		cList.push(flag)
	}
	return cList.reverse().join('')
}
module.exports = add

运行
```
npm run test
```
结果

表示 3 个测试 , 2个通过，花了 38毫秒，还有一个没有通过。

单元测试（二）: mocha+should.js+karma

在单元测试（一）例子的基础上，通过karma调用mocha测试框架来进行代码测试

安装依赖

npm install karma-cli -g
npm install --save-dev karma
npm install --save-dev karma-chrome-launcher
npm install --save-dev karma-mocha

配置karma（karma.conf.js）
运行 karma init

1. Which testing framework do you want to use ? (mocha)
2. Do you want to use Require.js ? (no)
3. Do you want to capture any browsers automatically ? (Chrome)
	注： 可添加多种浏览器， 如fireFox, IE等
5. What is the location of your source and test files ? (node_modules/should/should.js, test/**.js)
	注： 多个文件时要单独输入回车后再输入下一个文件
6. Should any of the files included by the previous patterns be excluded ? ()
7. Do you want Karma to watch all the files and run the tests on change ? (yes)

karma.conf.js 配置
因篇幅原因，隐藏了注释, 关于karma的更多配置请查看：http://karma-runner.github.io/3.0/config/configuration-file.html

// karma.conf.js
module.exports = function(config) {
	config.set({	
	 	basePath: '',
		// 测试框架
		frameworks: ['mocha'],
		// 加载的文档
		files: [
  			'node_modules/should/should.js',
 	 		'test/**.js'
 		],
 		exclude: [
		],
		preprocessors: {
		},
		reporters: ['progress'],
		port: 9876,
		colors: true,
		logLevel: config.LOG_INFO,
		// 是否自动监听测试文件变化 
		autoWatch: true,
		browsers: ['Chrome'],
		// 是否运行测试后就退出
		singleRun: true， 
		concurrency: Infinity
	})
}

启动测试
karma start
结果
弹出karma页面，点击DEBUG

打开控制台，切换到Console, 查看测试结果

单元测试（三）: mocha+should.js+mochawesome

在单元测试（一）例子上使用mochawesome直接生产漂亮的html报告页面

安装依赖
$ npm install --save-dev mochawesome

配置mocha.opts

--require should
--reporter mochawesome

运行
npm run test
若配置了karma, 也可使用karma start
结果
测试结果报告为mochaawesome-reports子目录的mochawesome.html

单元测试（四）: mocha+should.js+karma+travis

配置travis（.travis.yml）

language: node_js
node_js:
	- "8"
before_script:
	- "export DISPLAY=:99.0"
	- "sh -e /etc/init.d"
services:
	- xvfb

nodejs-test上传代码到github上，使用github账号登录travis官网，同步并激活监听github上的项目
参考文章：
持续集成服务 Travis CI 教程----阮一峰
结果

travis的配置文档：https://docs.travis-ci.com/user/languages/javascript-with-nodejs/

单元测试（五）：测试覆盖率

测试覆盖率是衡量测试质量的主要标准之一，含义是当前测试对于源代码的执行覆盖程度。在 karma 中使用 karma-coverage 插件即可输出测试覆盖率，插件底层使用的是 istanbul。
在单元测试（二）的基础上操作

安装依赖
npm install karma-coverage -D

修改karma.conf.js，增加覆盖率的配置：

preprocessors: {
  'test/**.js': 'coverage'
},
reporters: ['progress', 'coverage'],
coverageReporter:{
    type:'html',
    dir:'coverage/'
},

运行
karma start
结果
覆盖率测试结果报告在coverage子目录中

浏览器打开index.html