携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情 >>

如何保证自己写的代码或者工具函数能够经得起考验呢？边界、空值、溢出都能hold住？一个提高代码质量的方法就是进行测试，更具体地说是单元测试。本文将介绍单元测试的概念，前端单元测试框架，前端流行单元测试框架Jest的使用，欢迎阅读学习。

1.单元测试的基本概念

单元测试是指检查和验证软件中最小的可测试单元。在JS中单元是指一个函数。单元测试能够保证代码质量，单元测试四大特性如下：

2.常用的单元测试框架

目前主流的前端单元测试框架有Mocha，Jasmine, Jest ，三者之间简要的对比如下：

很多大型前端项目例如vue，vite等都会接入单元测试，下图展示了构建工具vite使用jest作为单元测试框架。

jest简单易用、高性能、易配置、多功能的特点使其成为一款优秀的前端单元测试框架。因此本文下面重点介绍jest的使用。

全局安装jest:

npm i jest -g

在项目中安装Jest:

npm i -D jest @types/jest

初始化Jest

jest --init

根目录下已经生成了一个叫 jest.config.js 的配置文件，我们看到里面有非常多的配置项。

下图介绍了常用配置项：

在项目根目录下新建test文件夹用于存放测试用例文件，如下图所示:

在上图所示的测试用例中有几个重要的函数，分别是expec、test和toBe。expect表示期望得到的运行结果；test表示测试结果是否通过预期；另外toBe是匹配器。更多关于jest的使用可以查看文档。

上述测试用例写完之后，我们在控制台运行命令 npm run test ，发现报错如下：

这是因为jest不支持es的模块化方案，解决方案如下：

安装转换插件

npm install --save-dev @babel/plugin-transform-modules-commonjs

配置.babelrc文件

{
  "env": {
    "test": {
      "plugins": ["@babel/plugin-transform-modules-commonjs"]
    }
  }
}

经过以上配置之后，再执行npm run test ，运行结果如下：

说明单元测试执行成功了。

掘金小册：从0到1落地前端工程化

掘金小册：深入浅出TypeScript：从基础知识到类型编程