本文已参与「新人创作礼」活动,一起开启掘金创作之路
测试的作用
提高代码质量:
测试就是找 BUG,找出 BUG,然后解决它。BUG 少了,代码质量自然就高了。
可维护性:
对现有代码进行修改、新增功能从而造成的成本越低,可维护性就越高。
什么时候写测试
如果你的程序非常简单,可以不用写测试
例如下面的程序,功能简单,只有十几行代码
function add(a, b) {
return a + b
}
function sum(data = []) {
let result = 0
data.forEach(val => {
result = add(result, val)
})
return result
}
console.log(sum([1,2,3,4,5,6,7,8,9,10])) // 55
测试类型与框架
测试类型有很多种:单元测试、集成测试、白盒测试…
测试框架也有很多种:Jest、Jasmine、LambdaTest…
本章将只讲解单元测试和 E2E 测试(end-to-end test 端到端测试)。
其中单元测试使用的测试框架为 Jest (opens new window),
E2E 使用的测试框架为 Cypress (opens new window)。
Jest
单元测试就是对一个函数、一个组件、一个类做的测试,它针对的粒度比较小
npm i -D jest
然后在项目根目录下新建 test 目录,作为测试目录。
对一个函数测试
例如一个取绝对值的函数 abs(),输入 1,2,结果应该与输入相同;
输入 -1,-2,结果应该与输入相反。如果输入非数字,
例如 “abc”,应该抛出一个类型错误
// main.js
function abs(a) {
if (typeof a != 'number') {
throw new TypeError('参数必须为数值型')
}
if (a < 0) return -a
return a
}
// test.spec.js
test('abs', () => {
expect(abs(1)).toBe(1)
expect(abs(0)).toBe(0)
expect(abs(-1)).toBe(1)
expect(() => abs('abc')).toThrow(TypeError) // 类型错误
})
执行 npm run test,就可以看到测试效果了。
对一个组件做测试
组件测试比较难,因为很多组件都涉及了 DOM 操作。
例如一个上传图片组件,它有一个将图片转成 base64 码的方法
那要怎么测试呢?一般测试都是跑在 node 环境下的,
而 node 环境没有 DOM 对象。
我们先来回顾一下上传图片的过程:
点击 ,选择图片上传。
触发 input 的 change 事件,获取 file 对象。
用 FileReader 将图片转换成 base64 码。
这个过程和下面的代码是一样的:
document.querySelector('input').onchange = function fileChangeHandler(e) {
const file = e.target.files[0]
tobase64(file)
}
function tobase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader()
reader.onload = (res) => {
const fileResult = res.target.result
resolve(fileResult) // 输出 base64 码
}
reader.readAsDataURL(file)
})
}
重写 File
window.File = function () {}
// 重写 FileReader
window.FileReader = function () {
this.readAsDataURL = function () {
this.onload
&& this.onload({
target: {
result: fileData,
},
})
}
}
提前写好文件内容
const fileData = 'data:image/test'
// 提供一个假的 file 对象给 tobase64() 函数
function test() {
const file = new File()
const event = { target: { files: [file] } }
file.type = 'image/png'
file.name = 'test.png'
file.size = 1024
it('file content', (done) => {
tobase64(file).then(base64 => {
expect(base64).toEqual(fileData) // 'data:image/test'
done()
})
})
}
// 执行测试
test()
在这里插入代码片