前端单元测试入门

开始

Jest是由Facebook发布的开源的、基于Jasmine的Javascript的单元测试框架。官方文档在这里。

安装：

然后创建一个文件，输出一个方法：

然后，创建一个名为的文件。这将包含我们的实际测试︰

然后将下面的配置部分添加到你的里面：

然后就可以通过来启动单元测试，测试结果：

webstorm增加Jest语法提示

→ → → → , 点击然后找到列表页中的, 然后点击.

匹配器

Jest通过匹配器来测试方法的结果是否符合预期，完整的API列表在这里。

普通匹配器

最简单的测试值的方法是看是否精确匹配

的用处调用被测试的函数或者方法，返回一个结果

就是匹配器，判断结果和期望是否相等

使用的是判断相等，如果要检查对象的值，需要使用

真假值

JS中，、、有时需要区分，有时不需要，所以Jest提供了下面的API来进行匹配：

：只匹配

：只匹配

：与相反

：只匹配

：匹配任何语句为真

：匹配任何语句为假

数字

对于数字有各种等价的匹配器

：=

：=

：>

：≥

：

：≤

对于浮点数，应该使用而不是

字符串

使用来验证字符串中是否包含指定的字符串或者正则表达式

数组

使用来验证数组中是否包含匹配子项

异常

如果一个函数在某些情况下会抛出错误，Jest也可以对这种情况进行预期，使用的API是

完整的API列表在这里。

测试异步代码

异步代码的测试是很常见的一个需求，当运行异步代码时，Jest需要知道它当前测试的异步代码什么时候完成，才可以运行下一个测试。Jest 有多种办法来处理这种情况。

回调

最常见的异步模式是回调函数。

举个例子，假设你有一个叫做的函数，可以去获取一些数据，拿到数据之后就会调用。你想要这个返回的数据是一个字符串。默认情况下，Jest测试走到它们运行期的结束阶段就算是结束了。这意味着这个测试不会按照你预期的那样运行：

问题在于这个测试在运行完的那一瞬间就算结束了，它根本就来不及去调用那个回调函数（）。

为了解决这个问题，引入单参数，Jest会等待结束执行后结束执行

如果没有被调用，测试就会失败，这也是你所希望发生的。

Promise

如果异步代码使用了Promise，处理方法更加简单，只需要在测试中返回一个Promise，Jest会等待Promise完成在进行校验，如果Promise被异常，则测试失败

上面的的意思是指定这个测试中的断言的数量，在测试异步代码时经常会用到这个方法，确保异步代码的全部的回调函数都被调用

注意：测试方法一定要一个，否则测试会在异步调用发起之后立刻结束

如果Promise的结果是，需要使用方法

方法可以用方法替代，方法可以用方法替代：

Async/Await

可以在测试中使用和。 若要编写测试，只要在传给的函数前面加上关键字就行了。

同样，在函数中也可以使用和方法

测试准备和测后整理

辅助函数

Jest提供了辅助函数帮助我们在运行测试前做一些准备工作，在测试结束后进行整理工作：

和：在每个测试前/后执行

和：在文件前/后执行

当和的块在块内部时，就只适用于该块内的测试

和块的执行顺序

Jest会在真正的测试()开始之前执行测试文件里所有的处理程序，当运行后会按照出现的顺序运行所有测试

（可以把每个当做异步任务看待）

单独测试

如果测试失败，可以使用来单独运行一个测试：

Mock Function

Mock函数用来模拟函数、方法的外部依赖，让我们清除无关的影响，专注于被测代码本身

有两种方式可以mock函数：

在测试代码中创建一个mock函数

自己编写一个来覆盖模块之间的依赖

使用Mock函数

创建一个函数很简单：

mock函数一些重要的API：

：为设定一个名称，用于输出时辨识使用

：获取使用设定的mock函数名

：所有的mock函数都有一个特殊的属性，它保存了次函数被调用的信息，并且追踪了每次调用时的值

：函数被调用时传入的参数数组组成的二维数组，比如函数被调用了两次，第一次是，第二次是，这时就是

：函数通过关键字被实例化成员组成的数组，例如：

：接受一个参数，在mock函数被调用时总被作为返回值返回

：接受一个参数，在mock函数被调用时作为返回值返回一次

：语法糖，返回

这样就可以使用mock函数进行测试：

Mock函数也可以用于在测试期间将测试值注入您的代码︰

mock函数非常适用于函数式编程的代码中：

mock实现

有时候mock函数不光要记录被调用的情况，还需要执行一些特定的操作，可以通过实现（或者直接向中传入一个函数作为参数）

有时候函数是从其他的模块中引入的，我们也需要将其mock掉：

当被模拟的函数运行完了定义的实现时，它将执行（如果被定义了）的默认实现：

对于我们有通常链接的方法（因此总是需要返回）的情况，我们有一个语法，API以函数的形式来简化它，它也位于所有模拟器上：

mock函数的匹配器

Jest为我们提供了一些mock函数的匹配器

这些都是语法糖，我们都可以通过属性获取到：

在Vue中配置Jest

自动配置

通过创造了模板脚手架时，可以选择是否启用单元测试，并且选择单元测试框架，这样Vue就帮助我们自动配置好了Jest。

手动配置

如果需要手动配置的话，首先要安装Jest和Vue Test Utils

然后在中定义一个单元测试的脚本。

为了告诉Jest如何处理文件，需要安装和配置预处理器：

接下来在中创建一个块：

在自动配置的时候，这部分内容是作为文件夹下配置文件单独出现的，在启动单元测的时候指定了这个配置文件：

注意：目前并不支持所有的功能，比如自定义块和样式加载。额外的，诸如代码分隔等 webpack 特有的功能也是不支持的。如果要使用这些不支持的特性，你需要用 Mocha 取代 Jest 来运行你的测试，同时用 webpack 来编译你的组件。

如果在webpack中配置了别名解析，比如把设置为的别名，那么你也需要用选项为Jest增加一个匹配配置：

尽管最新版本的Node已经支持绝大多数的ES2015特性，你可能仍然想要在你的测试中使用ES modules语法和stage-x的特性。为此我们需要安装 ：

接下来，需要在的里添加一个入口，来告诉Jest用处理JavaScript测试文件：（同样可以在进行配置）

假设webpack使用了，这时默认的Babel配置会关闭的转译，因为webpack已经可以处理了。然而，我们还是需要为我们的测试而开启它，因为Jest的测试用例会直接运行在Node上。

同样的，我们可以告诉面向我们使用的Node版本。这样做会跳过转译不必要的特性使得测试启动更快。

了仅在测试时应用这些选项，可以把它们放到一个独立的 env.test 配置项中 (这会被自动获取)。

文件示例：

测试覆盖率

Jest可以用来生成多种格式的测试覆盖率报告，通过扩展配置通常在或中) 的选项，然后添加数组来定义需要收集测试覆盖率信息的文件。

这样就会开启默认格式的测试覆盖率报告。你可以通过选项来定制它们。

：配置测试覆盖率是否开启，默认是关闭的，应为会降低测试速度

：配置收集测试覆盖率文件范围

：测试覆盖率输出形式，或对应控制台的输出

:测试覆盖率输出形式目录，配置为

参考

https://facebook.github.io/jest/docs/zh-Hans/getting-started.html

https://vue-test-utils.vuejs.org/zh-cn/guides/testing-SFCs-with-jest.html