iT邦幫忙

0

鼠年全馬鐵人挑戰 WEEK 19:Jest (下)

                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


尚未有邦友留言

立即登入留言