单元测试啊

本文已参与「新人创作礼」活动，一起开启掘金创作之路

测试的作用

提高代码质量：
	测试就是找 BUG，找出 BUG，然后解决它。BUG 少了，代码质量自然就高了。
可维护性：
	对现有代码进行修改、新增功能从而造成的成本越低，可维护性就越高。
1
2
3
4

什么时候写测试

如果你的程序非常简单，可以不用写测试
例如下面的程序，功能简单，只有十几行代码
1
2

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14

测试类型与框架

测试类型有很多种：单元测试、集成测试、白盒测试…

测试框架也有很多种：Jest、Jasmine、LambdaTest…

本章将只讲解单元测试和 E2E 测试（end-to-end test 端到端测试）。
其中单元测试使用的测试框架为 Jest (opens new window)，
E2E 使用的测试框架为 Cypress (opens new window)。

Jest

单元测试就是对一个函数、一个组件、一个类做的测试，它针对的粒度比较小

npm i -D jest

然后在项目根目录下新建 test 目录，作为测试目录。
1
2
3

对一个函数测试

例如一个取绝对值的函数 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) // 类型错误
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

执行 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)
    })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

重写 File

window.File = function () {}

// 重写 FileReader
window.FileReader = function () {
    this.readAsDataURL = function () {
        this.onload
            && this.onload({
                target: {
                    result: fileData,
                },
            })
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

提前写好文件内容

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()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在这里插入代码片
1