大家好，我是晨光，5 年前端开发，现在携程担任高级前端开发。上篇 https://t.zsxq.com/0fkYvv1S6 ，鱼皮评论说对前端没接触过测试的同学应该很有帮助，所以接上一篇单元测试相关的内容，晨光今天分享一些单测具体的写法。

一、如何写单元测试

组里面采用的 jest 写测试用例，配置简单，上手容易。

但一开始，晨光不太熟悉怎么写，就根据已有的 test 进行模仿，感觉摸着门路后，写了几个文件的用例，但是覆盖率却一直上不去。

后来发现，需要每一行都执行到才行，而晨光写的 test 只覆盖到很少的一部分。比如

回调函数内部的方法都没有执行到；
if else 只执行的了 if ；
try catch 只执行了 try ；
switch case 只执行了其中一种 case

后来经过摸索，找到了一些解决办法

1、回调函数

mock 那个需要传入 callback 的函数，内部执行 callback 即可，具体 Demo 如下

// 这个是 callback 相关源码

export function regularPay(orderInfo) {

return new Promise((resolve, reject) => {

try {

const orderId = orderInfo?.OrderId || '';

const payInfo = orderInfo?.payinfo || {};

regularPay2(payInfo, (payInfo, result) => {

if ([0, 1].includes(payInfo?.status)) {

resolve({ params: payInfo, result });

} else {

reject(result);

}

});

} catch (error) {

reject(error);

throw error;

}

});

}

这个是对应的测试用例的写法

jest.mock('../manager', () => {

return {

regularPay2: (payEntityInfo, callback) => {

callback({ status: 1 }, { status: 1, errorCode: 200 });

}

})

describe('function1', () => {

test('function1', () => {

regularPay()

})

2、if else

通过不断 mock 传入的值，函数执行多次，把 if else 都走一遍。

这里可结合 1，3 查看，多次执行，根据入参或者 mock 不同，会走到不同的 if else 分支

3、try catch

可以多次执行此方法，mock try 内部的某个方法 Reject error，外部就可以 catch 到

第一个callback 相关的函数中存在 try catch，所以就假设这样，覆盖 catch 的部分，测试用例如下

jest.mock('../manager', () => {

return {

regularPay2: (payEntityInfo, callback) => {

callback({ status: 3 }, { status: 3, errorCode: 200 });

// status 为 3，会走到对应 callback 的 else 分支，

// 然后会 reject 出这个返回值，就会走到 catch 的分支

}

})

describe('function1', () => {

test('function1', () => {

regularPay()

})

4、switch case

和 if else 一样，多次 mock ，多次执行即可。

export const getBtnOperationType = (operation) => {

switch (operation) {

case 0:

case 2:

return 'noNeedHandle';

case 3:

return 'continueCreateOrder';

default:

return 'noNeedHandle';

}

};

describe('getBtnOperationType', () => {

test('getBtnOperationType', () => {

expect(getBtnOperationType(0)).toEqual('noNeedHandle');

expect(getBtnOperationType(3)).toEqual('continueCreateOrder');

expect(getBtnOperationType(4)).toEqual('noNeedHandle');

});

})

二、写单元测试的好处

好的单元测试是为了检查代码的问题，而不是为了覆盖率而写单元测试，但现在做需求的时候，可能会出现时间紧，来不及写，到后面再补测试用例的人和开发的人不是同一个，所以就有了为了覆盖率而写的情况。

写单元测试的好处：

1、可覆盖多种场景

2、检测代码中存在的问题，保证代码质量

一开始晨光觉得单测就是纯粹的为了提升覆盖率而写，直到写某个 case 时，发现某个分支一直覆盖不到，回过头认真查看了代码后，发现是逻辑写的有问题。反馈给对应开发，调整后，覆盖率上去了，代码看着也没什么问题了。

直到这时候，晨光才发现，写单元测试确实可以检测出代码中存在的问题。「存在即合理」

以上，全文完，具体的写法，大家可以多多尝试，熟能生巧～

前端单元测试场景的全部评论