前言

随着互联网高速发展，用户对页面美观度、流畅度及交互体验有了更高要求。从软件开发的角度来讲，项目技术的复杂度会使得开发、测试、交付等流程的复杂度成倍提升，而测试作为整个项目交付流程中非常重要的一个环节，在重前端的形势下，前端测试的构建也显得尤为重要，特别是针对前后端分离的项目。接下来我们一起学习下开发测试框架 Jest。

开源测试框架 Jest，是 Facebook 出品的一个前端测试框架，相对其他测试框架，它的一大特点就是内置了常用的测试工具，比如自带断言、测试覆盖率工具和mock数据功能，实现了开箱即用。用Jest 核心团队的话说：“Jest使测试变得愉快”。

安装

• 初始化npm项目工程

创建一个basic-jest-demo的目录，进入目录并初始化npm项目工程，按照提示进行即可完成。

• 安装jest

安装jest和jest类型定义，类型定义目的在于方便在编写代码过程中编辑器的友好提示。

npm install --save jest @types/jest

• 编写demo

在basic-jest-demo目录下创建一个sum.js文件，代码如下：

然后创建一个sum.spec.js文件来测试我们的sum函数，代码如下：

最终，通过命令 jest sum.spec.js 运行测试文件，结果如下：

一个最简单的单元测试demo就完成了。那么接下来我们一起学习下jest配置，为jest在真实项目中使用做准备。

配置

• 添加npm运行脚本test

编辑package.json，添加以下配置，其中 --coverage表示生成测试覆盖率报告，可通过npm run test命令运行。

• 添加jest配置

编辑package.json，添加以下配置。

接下来，我们就分别来看这几个配置的含义。

"testEnvironment": "jsdom"

表示它是一个类浏览器的测试环境，我们可以使用浏览器环境中的一些 API。

"testRegex": "/test/.*\\.(test|spec)\\.(js)#34;

testRegex 表示要测试文件的正则表达式。即 test 目录下所有以 .test.js 和 .spec.js 的文件都需要跑测试。

"moduleFileExtensions": [
  "js"
]

模块文件扩展名，当你去引入一个模块并没有指定扩展名的时候，它会依次尝试去添加这些扩展名去找你引入的模块文件。

coverageThreshold 表示测试覆盖率的阈值设定，即全局的代码分支覆盖率要达到 90%，方法覆盖率要达到 95%，代码行数覆盖率达到 95%，声明覆盖率达到 95%，当我们的测试覆盖率达不到阈值的时候，测试会失败。

表示收集 src 目录以及它的所在子目录中的 js 和 ts 文件的测试覆盖率。

配置添加完成后，按照配置调整项目工程目录结构，在项目根目录下创建src和test目录，其中src用来存放项目代码文件，test用来存放测试用例文件。调整完成后，再次运行 npm run test命令，运行结果一致。

其他关于 Jest 的配置，感兴趣的同学可以去官网做扩展学习。

• 项目使用babel

先安装babel，babel将支持在项目中很轻松的使用ES6的高级语法。

npm install babel-jest @babel/core @babel/preset-env

安装完成后，编写babel.config.js配置文件，文件内容如下：

接下来，采用ES6语法重新编写sum.js和sum.spec.js文件，sum.js文件内容如下：

sum.spec.js文件内容如下：

再次运行npm run test命令，结果如下：