Photo on jestjs.io

---

前言

上一篇已经简单的介绍过 Jest 的初始作业，并执行简单的测试
如果正在看这篇的大哥大姐还没看过上一篇的话
小弟在下面附上连结，有兴趣的大哥大姐可以快速地看一下
鼠年全马铁人挑战 WEEK 18：Jest (上)
那这篇就要接续上一篇的内容开始实作啰～ ヽ(́◕◞౪◟◕‵)ﾉ

---

使用 Jest

基本用法

Matchers

在撰写测试免不了还是要验证预期结果
以下内容是较常使用到的匹配器
想要了解更多可以参考官方网站: Jest-expect

比对值是否预期
toBe 用于检查值是否符合预期
toEqual 用于检查 Object 值是否完全相等
比对值状态是否预期
toBeNull 仅匹配 null
toBeUndefined 仅匹配 undefined
toBeDefined 与 toBeUndefined 相反
toBeTruthy 匹配 if 语句视为 true 的任何内容
toBeFalsy 匹配 if 语句视为 false 的任何内容
比对数字是否预期
toBeGreaterThan 大于
toBeGreaterThanOrEqual 大于等于
toBeLessThan 小于
toBeLessThanOrEqual 小于等于
比对字串，阵列是否包含值
toMatch 使用正规表示法检查字串
toContain 使用迭代检查是否包含特定项目

Setup, Teardown

通常，在撰写测试脚本时
需要在测试执行前进行一些前置作业
或是在测试执行后进行一些结束动作

在 Robot Framework 和 Nightwatch.js 都有这个功能
当然 Jest 也不例外，提供了此功能来解决此问题

最常见的有以下四种 (按照执行顺序排列分别是)

beforeAll(() => { ... }); : 测试档案开始执行前beforeEach(() => { ... }); : 每个测试开始执行前afterEach(() => { ... }); : 每个测试执行结束后afterAll(() => { ... }); : 测试档案执行结束后

撰写测试

小弟这次就使用六角学院大大释出的马拉松 API 资料
来验证回传值是否符合预期
测试的内容简单的分成三个

测试 key ID 是否正确测试文章篇数是否小于等于 40 篇测试个人网页连结是否正确

首先先建立一份文件用来 get request

接者建立所要测试的 马拉松 API 文件并进行回传

最后就是建立测试脚本的测试文件

执行测试

在上一篇 鼠年全马铁人挑战 WEEK 18：Jest (上) 的内容中
小弟已经更改过 package.json 文件中的 script

"scripts": {  "test": "jest"}

因此只需要在 terminal 中执行 $ npm run test 就可以执行所有测试了

备注
sum.test.js 是上一篇文章的测试
demo.test.js 是上一个小节所提到过的所有基本用法测试
w3hexschool.test.js 是这个小节所撰写的马拉松 API 测试脚本

检查报告

如果觉得执行测试的回传报告有点少
也可以到 package.json 文件中改一下 script
加一下 --coverage
可以检查 js 文件测试的涵盖程度

"scripts": {  "test": "jest --coverage"}

执行结果如下

小弟没有测试 Promise 的 error 状况
所以没有完美的 100 趴 இдஇ

另外在专案底下也会多一份资料夹
可以点选里面的 index.html 来查看更详细的内容

觉得还是不满意的话没关係
有很多大神已经帮你把 html report 的套件写好了
赶快来看看有哪些吧

jest-stare

一开始当然是先安装 jest-stare 啦～
$ npm install --save-dev jest-stare

安装完之后接着设定一些参数
新增一份 jest.config.json 文件，内容如下

{  "reporters": [    "default",    [      "jest-stare", {        "resultDir": "report/jest-stare",        "reportTitle": "jest-stare!",        "additionalResultsProcessors": [          "jest-junit"        ],        "coverageLink": "../../coverage/lcov-report/index.html",        "jestStareConfigJson": "jest-stare.json",        "jestGlobalConfigJson": "globalStuff.json"    }]  ]}

设定完之后，再执行一次测试
此时又会再多一份 report 资料夹
里面的 jest-stare 资料夹中会有 index.html 的文件
开启它就可以看到漂漂亮亮的 report 啰～

jest-html-reporters

一开始当然也是先安装 jest-html-reporters 啦～
$ npm install --save-dev jest-html-reporters

安装完之后，
如果试过上一个就直接把 jest.config.json 文件，的内容改一下
如果还没的话就新增一个新的文件吧，内容如下

{  "reporters": [    "default",    [      "jest-html-reporters", {        "publicPath": "report/jest-html-reporters"    }]  ]}

设定完之后，再执行一次测试
此时 report 资料夹会再多一份 jest-html-reporters 资料夹
开启 jest_html_reporters.html 的文件
就可以看到另一个漂漂亮亮的 report 啰～

---

结尾

以上是这两週的 Jest 的介绍
jest 的基本语法与漂亮的 Report 希望对在看的大哥大姐有帮助

如果有疑问或是有错误，还请各位大哥大姐提点。
小弟将继续往下週迈进。 ─=≡Σ((( つ•̀ω•́)つ

---

参考文件:

Jest · ? Delightful JavaScript Testing
jest-html-reporters
jest-stare