之前在网上看了很多关于jest的文章，看的雨里雾里，看不懂，于是自己搜集了一些文章，结合了自己的理解，写了这篇文章，除了能记录下自己的学习过程，也希望能帮助一些需要的人。

首先先从jest单元测试入门开始说起。

一、Jest是什么

Jest 是用来创建、执行和构建测试用例的一个 JavaScript 测试库。你可以在任何项目中以 npm 包的形式，安装并使用它。Jest 是当前最受欢迎的测试执行器，并且是在创建 React App 时的默认选项。

二、测试流程

一个典型的测试流程如下：

1. 引入要测试的函数

2. 给函数一个输入

3. 定义预期输出

4. 检查函数是否返回了预期的输出结果

所以我们要做的就是：输入 —— 预期输出 —— 验证结果

三、Jest起步

3.1 安装

在桌面上新建一个文件夹

完成上面两步之后，生成的文件夹中包含node_modules文件夹，package.json文件，yarn.lock文件。

打开 package.json，将执行 Jest 的命令命名为“test”：

根目录下新建 src文件夹，文件夹下面新建filterByTerm.js文件，里面的内容如下：

然后在根目录下新建 tests文件夹,
接下来在 tests 文件夹中创建一个文件 filterByTerm.spec.js。你可能存在疑问，为什么文件名中包含一个“.spec”？这其实是从 Ruby 借鉴而来的一种约定，用于将文件标记为特定功能的规范。

现在可以准备写测试了。记住，测试是关于输入、函数和预期结果的事情。

首先，我们定义一个简单的输入——一个包含对象成员的数组input = [ { id: 1, url:"https://www.url1.dev"}, { id: 2, url:"https://www.url2.dev"}, { id: 3, url:"https://www.link3.dev"} ];

再来定义我们的预期结果。比如，我们的搜索项是“link”，期望的结果是一个仅包含一个对象成员的数组：output = [{ id: 3, url: "https://www.link3.dev" }];

现在可以写实际测试代码了。我们要用到 Jest 的 expect 函数和 匹配器（matcher） 来检查我们假想的（当前是）函数调用时是否返回预期结果。

在 Jest 测试中，我们把测试函数包装在 expect 里面，并且搭配 匹配器 （用来检查输入的 Jest 函数）一起使用，来完成测试。下面列出了完整测试代码：

现在，运行一波测试：

看到没，通过了！

很棒。但是完了吗？还没。怎样让函数再次调用失败呢？接下里，我们用大写的搜索项调用下函数：

执行测试……嗯，失败了。来吧，我们再来修复下。

filterByTerm 应该也要把大写搜索项考虑进去。也就是说，即使是搜索内容是大写的，也要以忽略大小写的形式返回对应的匹配对象。

为了通过测试，我们需要稍微调整下 match 方法的正则表达式，相较于直接使用 searchTerm，我们可以构建一个不区分大小写的正则表达式。也就是说，一个与字符串大小写无关的表达式。下面是完整测试代码：

再次运行下面的命令：

在此执行，会看到通过了。

下一节，我们要来看下另一个重要的测试话题：代码覆盖率。

四、代码覆盖率

现在假设我是你们公司新来的同事。我对测试一无所知，在不清楚我们开发环境的情况下，我在这个函数里加了一个 if 语句：

我们在 filterByTerm 里加了一行新代码，但没有被测试。除非我告诉你“这里有个新语句需要测试”，你是不会知道要测试什么的。几乎不可能知道我们的代码会走的所有路径，因此需要一种工具来帮助我们发现这些盲点。

这种工具称为代码覆盖率,它是我们工具箱里的一个强大工具。Jest 内置了代码覆盖率工具，你可以激活它

打开 package.json，将执行 Jest 的命令命名为“test:coverage”：

执行覆盖率测试：

得到如下的结果：

这是对我们函数测试覆盖率的一个很好的总结。我们看见第 2、3 行没有覆盖。现在来测试我新添加的 if 语句，来达到 100% 的代码覆盖率。

到这里jest入门就介绍完了，大家最关心的应该是jest如何在vue项目中使用，请往下看：

五、在vue 项目中的使用

首先为了演示，我会先创建一个新的vue项目

打开新建的这个vue项目：

运行完上面的命令之后，会发现根目录下面多了tests文件夹和 jest.config.js 文件，tests文件夹下面有一个unit文件夹，里面包含了example.spec.js文件

需要先安装和配置 vue-jest 预处理器：

然后运行下面的命令：

Mac电脑会报错vue-cli-service: command not found 

解决办法是可以在package.json里面添加上依赖：

然后运行下面的命令重新安装依赖：

在生成的项目根目录下，会有一个 jest.config.json 文件，cli自动生成所用的预设是@vue/cli-plugin-unit-jest。我们可以在这里对 jest 进行个性化的配置。以下是一个配置文档的例子。

注意看上面的注释，每一行的作用都已经标注出来。

HelloWorld.vue文件的内容如下：

example.spec.js文件的内容如下：

然后运行下面的命令：

得到如下结果：

附录：

package.json文件的内容如下：