JavaScript Jest 怎么用

JavaScript Jest 怎么用

很多前端开发者写代码时，总少不了和“测试”打交道——写好一个功能，得手动点一遍页面、输入各种场景试一遍，不仅费时间，还容易漏测边角 case，哪天代码改了个小地方，之前能跑通的功能突然崩了都不知道。这时候就需要一个能自动帮你“查错”的工具，Jest 就是前端圈里最常用的那种，专门给 JavaScript 代码做单元测试的“智能检查员”。

第一步：先给项目“装”上 Jest

要让 Jest 干活，得先把它请到你的项目里。如果你是用 npm 包管理（现在大部分前端项目都是），只需要在终端里敲两行命令就行，完全不用搞复杂的配置。

先打开项目的终端，找到项目根目录，输入 npm install --save-dev jest，等个几秒钟，Jest 就作为开发依赖装好了——因为它只是开发时用的测试工具，上线后不需要带这个包，所以加 --save-dev 是关键，别装错地方。

装完后，还得改个小地方：在项目根目录的 package.json 文件里，找到 scripts 这一块，加一行 "test": "jest"，这样以后想跑测试，只要在终端输入 npm test，Jest 就会自动开工啦。

第二步：写个简单的测试用例，让 Jest 看懂你的代码

Jest 不是凭空猜你写的代码对不对，得你告诉它“这个函数应该做什么”，它再帮你核对。举个最生活化的例子：假设你写了一个计算奶茶总价的函数，点单时 1 杯奶茶 15 块，买 3 杯要多少钱？你写了个 calculateMilkTeaPrice 函数，那对应的测试用例就要写清楚：“当输入数量为 3 时，这个函数的返回结果应该是 45”。

新建一个测试文件，Jest 有个默认规则，测试文件要和原函数放一块，或者以 .test.js 结尾，比如原函数叫 milkTea.js，测试文件就叫 milkTea.test.js。内容写起来超简单，用 Jest 自带的 test 和 expect 两个方法就行：

`javascript

// 引入原函数

const calculateMilkTeaPrice = require('./milkTea');

// 写测试用例，第一个参数是测试描述，第二个是要跑的代码

test('买3杯15元的奶茶，总价应该是45', () => {

// expect 是“期待”，后面接要测试的函数，toBe 是“等于”的意思

expect(calculateMilkTeaPrice(3)).toBe(45);

});

`

就像你给朋友说“帮我看看这杯奶茶的钱算对没，买3杯应该45”，Jest 就是那个帮你核对的朋友，非常直白。

第三步：跑测试，看 Jest 怎么“找问题”

写完测试，回到终端敲 npm test，Jest 会自动扫描所有 .test.js 文件，然后一行一行核对你的函数。如果函数算对了，终端会跳出绿色的“Test passed”，告诉你没问题；但如果函数写错了，比如你不小心写成 15 * 2，那 Jest 会立刻跳出红色的错误提示，说“期待得到 45，但实际得到 30”，还会告诉你错在原函数的第几行，简直像个带精准定位的错题本。

除了这种“基础功能测试”，Jest 还能测更复杂的场景。比如你点奶茶可能有优惠：满 50 减 5，那你可以再加一个测试用例：“买4杯（60元），总价应该是55”，Jest 会同时跑两个测试，确保不管有没有优惠，函数都算得对。

小技巧：Jest 的偷懒小功能

Jest 还有个贴心的地方，如果你敲 npm test -- --watch，它会变成“自动测试模式”，只要你改了代码，它会自动重新跑相关的测试，不用每次手动敲命令，适合开发时边写边测，省不少功夫。

总的来说，Jest 就是前端开发者的“代码小助手”，不用写复杂的配置，只要你告诉它代码该做什么，它就能帮你盯着代码有没有出错，再也不用手动点来点去测功能，既能省时间，又能减少线上出问题的概率。