关于前端:Jest测试框架JSDoc学习

Jest 测试框架、JSDoc 学习

一、单元测试

1、什么是单元测试

    单元测试就是为检测特定的指标是否符合标准而采纳专用的工具或者办法进行验证，并最终得出特定的后果，这里所说的特定指标就是咱们编写的代码。

2、单元测试的益处

    单元测试能够缩小 bug，晋升代码可读性可维护性，为零碎重构做铺垫，缩小咱们之后的工作量。

二、Jest

1、什么是 Jest

    Jest 是 Facebook 开发的集成了测试执行器、断言库、spy、mock、snapshot 和测试覆盖率报告等性能的一个测试框架。

2、Jest 相较于其余测试框架的劣势

    Jest 开箱即用，无需多余配置，API 简略，上手成本低，安全性高。

三、Jest 学习

1、装置 Jest

    首先创立一个名为 Jest-demo 的工程，在终端输出 npm install --save-dev jest 并运行进行 Jest 框架的装置。

2、编写业务逻辑代码

    创立一个 js 文件，用来编写须要测试的性能代码，如下图，编写了一个加法的 sum 办法，再用 module.exports 将此办法变成全局的办法。

3、编写单元测试代码

    创立一个.test.js 文件，用来测试下面的 sum 办法，通过 require 引入 sum 办法，进行测试。

4、运行单元测试

    在 package.json 配置文件中减少 test 命令，之后在终端输出 npm test 就能够进行测试了。

    上面就是测试胜利返回的后果：

    那如果咱们把业务逻辑代码批改成谬误的之后会返回什么样的后果呢？

    上面是测试失败返回的后果：

    如图，它会通知咱们冀望接管到的值和理论接管到的值，这样就有助于咱们去寻找谬误。

注：测试代码中的 toBe 就是 Jest 框架的一个匹配器，toBe 就相当于 ” === “,Jest 框架还有许多其余的匹配器，如：toEqual，toBeNull，toBeUndefined，toBeDefined，toBeTruthy，toBeFalsy，在匹配器后面加上 not. 就是取反，toBeGreaterThan，toBeLessThan，toBeGreaterThanOrEqual，toBeLessThanOrEqual，toBeCloseTo，toMatch，toContain，toThrow 等。

5、测试异步代码

    异步操作胜利须要在匹配器后面加上.resolves，如下图：

    异步操作失败报错须要在匹配器后面加上.rejects，如下图:

6、Jest 的四个钩子

    Jest 提供了四个钩子，别离是 beforeEach、afterEach、beforeAll、afterAll。当想要在每个 test 前后都做同一件事件时，就用 beforeEach 和 afterEach；想要在全副的 test 前后做同一件事件时，则用 beforeAll 和 afterEach.

    运行后果如下图：

    能够用 describe 关键字对 test 分组：注：1、放在 describe 外部的钩子仅对以后分组失效；2、当有多个 describe 时，会先执行所有的 describe，再执行所有的 test。

    运行后果如下图：

7、jest.fn()

    jest.fn() 用于创立一个函数，咱们能够设置该函数的返回值、监听该函数的调用、扭转函数的外部实现等等，咱们通过 jest.fn() 创立的函数有一个非凡的 .mock 属性，该属性保留了每一次调用状况，如下图：

    执行后果如下图：

7、jest.mock()

    jest.mock 用于模仿整个内部模块，能够应用它来监督对类构造函数及其所有办法的调用。

    测试通过后果如下图：

8、jest.mock()

    Jest.spyOn() 办法同样创立一个 mock 函数，然而该 mock 函数不仅可能捕捉函数的调用状况，还能够失常的执行被 spy 的函数。实际上，jest.spyOn() 是 jest.fn() 的语法糖，它创立了一个和被 spy 的函数具备雷同外部代码的 mock 函数。

    测试通过后果如下图：

三、JSDoc 学习

1、什么是 JSDoc

    JSDoc 是一个用于 JavaScript 的 API 文档生成器，相似于 Javadoc 或 phpDocumentor。能够将文档正文间接增加到源代码中，就在代码自身旁边。JSDoc 工具将扫描源代码并生成 HTML 文档。

注：JSDoc 可能辨认的正文必须要以 /** 结尾。

2、JSDoc 装置和配置

    首先创立一个 jsdoc-demo 工程文件夹，而后在终端输出 npm init -y 生成 package.json 文件，之后输出 npm i -D jsdoc 装置 JSDoc 工具，装置实现后，在根目录下创立 jsdoc 的配置文件对 jsdoc 进行配置，最初在 package.json 中增加 jsdoc 的执行脚本。

3、JSDoc 应用

    创立一个函数，在函数上边用 /** 能够创立函数相干正文。

    在终端输出 npm run doc 能够生成正文的 HTML 文档，HTML 文档保留在 jsdoc 配置文件中设定的文件夹下。

    HTML 文档如下图：

注：相似 @param 这样 @结尾的就是 jsdoc 的标签，还有更多的 jsdoc 标签，如：@constructor，@typedef，@property，@return 等，能够应用 jsdoc 标签来为正文增加更多信息。