前端自動化測試jest教程3-命令行工具

在這裏插入圖片描述

準備條件

以第1節教程的創建的目錄和代碼爲基礎進行講解。如果沒有看過第1節教程,請關注我,查看以往該系列的文章

這節教程主要講解jest中的中的一些命令行工具,將第1節的代碼複製一份,並運行npm run test
效果圖:

先把這幾個提示的命令,講解一下


這裏幾個命令大家自己一定要動手試一下,才能夠增加印象
着重講一下 o 這個命令,需要配個git使用,必須將項目提交到本地倉庫中(實際開發中,項目基本都放在git倉庫中,所以影響不大),jest通過git來判斷哪些文件修改過,添加倉庫方法如下:

  • git init 初始化git倉庫
  • git add . 將所有文件加入到暫存區
  • git commit -m 'init' 將文件提交到本地倉庫

下面這幾個是在package.json 中配置的

–watchAll

我們目前使用的是–watchAll,監控所有文件變化
packeage.json文件的script配置

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

–watch

這個和使用–watchAll後按下 o 鍵,是一樣的效果。每次只重新測試修改過後的文件

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

–init

生成一個jest基礎配置文件

–coverage

將測試覆蓋率信息輸出爲報告,會生成測試覆蓋率的詳細信息
會在項目中生成一個coverage的文件夾,打開其中的index.html 可查看詳細信息

以上這幾個是比較常用的,在實際項目中掌握這幾個就夠用了,jest的cli配置文件有很多,但是實際開發中,我們都是配合其他腳手架,實現開箱即用,很多配置我也沒使用過,有興趣的話,可以去官網文檔看看 https://jestjs.io/docs/en/cli

這節內容很少,但是最好都自己動手試一下,加深自己的印象和理解
下一節教程將介紹在jest中怎樣去測試異步代碼

從不相信自己是天才,再簡單的事最好自己動手試一下,切勿眼高手低,共勉

本人能力有限,文章可能會有不正確或者不恰當的部分,希望你可以指出

關注公衆號,和我一起學習前端必備技能,前端自動化測試jest

在這裏插入圖片描述

發佈了22 篇原創文章 · 獲贊 15 · 訪問量 1萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章