前端单元测试场景

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


一、如何写单元测试

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


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


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

  1. 回调函数内部的方法都没有执行到;
  2. if else 只执行的了 if ;
  3. try catch 只执行了 try ;
  4. 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 时,发现某个分支一直覆盖不到,回过头认真查看了代码后,发现是逻辑写的有问题。反馈给对应开发,调整后,覆盖率上去了,代码看着也没什么问题了。


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


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

0个评论
点击登录,快来和大家讨论吧~
表情
图片
暂无评论
下载 APP