JavaScript 如何做单元测试

前端开发做项目时，经常会遇到写好的功能突然出bug的情况——明明测试了所有流程，上线后还是出现了奇怪的报错。这时候很多人会选择反复手动测试整个流程，不仅浪费时间，还容易漏掉小问题。其实用JavaScript做单元测试，就能把这类问题提前解决，就像给代码装了个“自动监督员”。

什么是单元测试？用日常小事讲明白

单元测试就是把代码拆成最小的可运行单元（比如一个计算价格的函数、一个验证输入的小模块），然后给每个单元写“测试用例”，让计算机自动检查这个单元的功能是不是符合预期。

举个生活化的例子：你要做一杯奶茶，“加珍珠”是一个小单元，正常流程是“加5颗珍珠”，测试用例就可以写成“加5颗珍珠后，杯子里的珍珠数量是5”；如果加错成6颗，就说明这个单元出问题了。对应到代码里，就是写一个函数计算珍珠数量，测试它的输入输出对不对。

做单元测试的核心步骤，跟着做就会了

JavaScript做单元测试不用复杂的工具，最常用的是Jest，新手也能快速上手，整个过程分3步，每一步都很简单。

第一步：先准备好要测试的“目标函数”。比如我们写一个计算商品总价的函数，输入单价和数量，返回总价格：

`javascript

function calculateTotal(price, count) {

return price * count;

}

`

这个函数就是我们要测的“单元”，它的功能很明确——单价乘数量。

第二步：写测试用例，告诉测试工具“我要验证什么”。用Jest写测试很直观，只要套固定的格式：

`javascript

test('计算总价时，输入单价10、数量2，应返回20', () => {

expect(calculateTotal(10, 2)).toBe(20);

});

`

这里test是告诉工具“这是一个测试”，expect是“要检查的内容”，toBe是“预期结果”。这个测试用例就是说“输入10和2，结果应该是20”。

第三步：运行测试，看结果。在命令行里输入npx jest，工具会自动跑所有测试用例。如果显示“Pass”，说明这个单元的功能没问题；如果显示“Fail”，会直接告诉你哪个测试错了，比如你不小心把函数写成price + count，工具就会提示“预期结果20，实际是12”，一眼就能找到问题。

为什么单元测试值得花时间做？

很多新手会觉得“写测试太麻烦，不如直接手动测”，但实际项目里，重复修改代码后，手动测很容易漏。比如你后来给计算总价的函数加了“满100减10”的优惠，手动测可能会只测满100的情况，但单元测试可以把“满99不减”“满100减10”两种情况都写成测试用例，改完代码一键就能知道有没有出错。

还有，单元测试能把代码的“逻辑边界”理得更清楚——写测试的时候，会逼着你想清楚函数到底该处理哪些情况，比如数量是0的时候会不会报错？单价是负数的时候会不会返回负数？这些容易忽略的边界问题，手动测试经常会漏掉，单元测试却能自动检查。

对前端开发来说，单元测试就像给代码买了份“保险”，不用每次改功能都心惊胆战，也不用为重复测试浪费时间，慢慢就能养成好的编码习惯，代码也会更稳定。