当前位置：首页 > news >正文

前端为什么需要单元测试？

news 来源：原创 2025/8/14 17:25:48

一. 前言

对于现在的前端工程，一个标准完整的项目，通常情况单元测试是非常必要的。但很多时候我们只是完成了项目而忽略了项目测试。我认为其中一个很大的原因是很多人对单元测试认知不够，因此我写了这篇文章，一方面期望通过这篇文章让你对单元测试有一个初步认识。另一个方面希望通过代码示例，让你掌握写单元测试实践能力。

二. 前端为什么需要单元测试？

必要性：JavaScript 缺少类型检查，编译期间无法定位到错误，单元测试可以帮助你测试多种异常情况。
正确性：测试可以验证代码的正确性，在上线前做到心里有底。
自动化：通过 console 虽然可以打印出内部信息，但是这是一次性的事情，下次测试还需要从头来过，效率不能得到保证。通过编写测试用例，可以做到一次编写，多次运行。
保证重构：互联网行业产品迭代速度很快，迭代后必然存在代码重构的过程，那怎么才能保证重构后代码的质量呢？有测试用例做后盾，就可以大胆的进行重构。

三. 现状

下面是一份抽样调查片段，抽样依据如下：

向 200 名相关者发出在线问卷调查，其中 70 人回答了问卷中的问题，前端人数占 81.16%，如果你有兴趣的话，也可以帮我填一下调查问卷 (https://www.wjx.cn/vm/Ombu9q1.aspx)
目标群体：所有开发人员
组织规模：不到 50 人，50 到 100人， 100人以上

你执行过 JavaScript 单元测试吗？

调查中的另一个有趣的见解是，在大型组织中单元测试更受欢迎。其中一个原因可能是，由于大型组织需要处理大规模的产品，以及频繁的功能迭代吧。这种持续的迭代方式，迫使他们进行自动化测试的投入。更具体地说，单元测试有助于增强产品的整体质量。

另外，报告显示超 80% 人认为单元测试可以有效的提高质量，超 60% 人使用过 Jest 去编写前端单元测试，超 40% 的人认为单元测试覆盖率是重要的且覆盖率应该大于 80%。

四. 常见单元测试工具

目前用的最多的前端单元测试框架主要有 Mocha (https://mochajs.cn/)、Jest (https://www.jestjs.cn/)，但我推荐你使用 Jest，因为 Jest 和 Mocha 相比，无论从 github starts & issues 量，npm下载量相比，都有明显优势。

github stars 以及 npm 下载量的实时数据，参见：jest vs mocha (https://www.npmtrends.com/jest-vs-mocha) 截图日期为 2021.11.25

Github stars & issues

npm 下载量

Jest 的下载量较大，一部分原因是因为 create-react-app 脚手架默认内置了 Jest, 而大部分 react 项目都是用它生成的。

从 github starts & issues 以及 npm 下载量角度来看，Jest 的关注度更高，社区也更活跃

框架对比

框架	断言	异步	代码覆盖率
Mocha	不支持（需要其他库支持）	友好	不支持（需要其他库支持）
Jest	默认支持	友好	支持

Mocha 生态好，但是需要较多的配置来实现高扩展性
Jest 开箱即用

比如对 sum 函数写用例

文件：./sum.js

function sum(a, b) {return a + b;
}module.exports = sum;

Mocha + Chai 方式

Mocha 需要引入 chai 或则其他断言库去断言, 如果你需要查看覆盖率报告你还需要安装 nyc 或者其他覆盖率工具

文件：./test/sum.test.js

const { expect, assert } = require('chai');
const sum = require('../sum');describe('sum', function() {it('adds 1 + 2 to equal 3', () => {assert(sum(1, 2) === 3);});
});

Jest 方式

Jest 默认支持断言，同时默认支持覆盖率测试