最近在搞Jest單元測試,如何在vue中安裝和使用jest我就不說了,前一篇文章簡單的說了一下在使用jest時遇到的一些問題,但是我覺得並沒有真正的解決的很好。后面會在學習過程中更新前面的那篇文章,加入后續遇到的問題以及解決問題的方法,持續的做一個記錄。
好了,廢話不多說,咱們開始今天的內容吧。因為之前使用jest時候的項目是移植過來的項目,因為復雜的環境以及外部文件引入的等等等等的問題。采用的方式就是新建一個空的vue-cli生成的用jest來做單元測試的項目,這就導致了測試環境的配置是極為脆弱的。而且還有十分大的隱患。但是又沒辦法一下子解決。所以,我想在這篇文章中,整理記錄一下jest的配置參數的用法等。
jest的配置文件是單獨生成在unit文件夾下的一個獨立文件,並沒有和vue-cli生成的webpack構建的環境相關聯。所以個人感覺這樣更清爽一些吧。
一、默認配置文件參數的意義
我們先來看一張圖,然后我一一介紹說明他們都是用來做什么的:
這是當前版本的vue-cli生成的jest.conf.js的配置文件,我們可以在package.json中的配置項里看到,我們在npm run unit 的時候,真正運行的就是這個文件的配置。
前面的文章說過了,要添加一個testURL來解決找不到localstorage的問題。並且修改mapCorverage為collectCorverage,前者是舊版本的參數。
那我們接下來一一介紹每個參數的配置及其含義。
rootDir:其實就是指整個項目的根目錄,也就是最外層的目錄。這里多句嘴,再解釋下path.resolve(__dirname,"../../")的意義,他最終返回的結果是該問見所在的根目錄,簡單來說__dirname返回的是當前目錄,再向上兩層,就是整個項目的根目錄了。
moduleFileExtensions:這個文檔解釋的是“模塊使用的文件擴展名數組,從左往右查找這些文件”。實際上我的理解,這個參數的意義就是讓jest知道你需要測試覆蓋的文件的擴展名都是什么。
moduleNameMapper:一種正則表達式到模塊名的映射,匹配到的文件的內容可以是空的。我理解的是,可以通過該參數,來mock一些圖片,css等靜態資源文件,因為我們在測試的時候實際上是不太需要這些文件的,但是有需要引入它作為環境上的依賴。
transform:簡單來說就是轉換器,正則匹配到的文件可以通過對應模塊的轉換器來解決一些未來版本語法時可以使用它。通過正則來匹配文件,為匹配到的文件使用對應的模塊。
snapshotSerializers:快照測試的插件,會生成測試文件的一個快照版本,可以再package.json中查看安裝的快照插件。
setupFiles:運行一些測試環境所要依賴的模塊的路徑列表,比如引入vue,elementUI等插件的列表,以給測試提供完整的環境。
collectCoverage:是否收集測試時的覆蓋率信息。
testURL:該選項是設置jsdom環境的參數。
coverageDirectory:jest輸出覆蓋率信息文件的目錄。
collectCoverageFrom:為數組中匹配的文件收集覆蓋率信息,即使並沒有為該文件寫相關的測試代碼,需要將collectCoverage設置為true,或者通過--corverage參數來調用jest。
這樣我們就解釋完了基礎配置的參數,學習過后,我們對jest的配置有了一個基本的了解。但是要想寫單元測試文件,還是遠遠不夠的。下一篇文章,我會介紹如何在為vue的單文件組件寫測試用例。並且解釋說明一下我在使用jest時候的一個疑問,什么是localVue,shallowMount與mount與localVue的區別是啥?localVue與Vue的區別是啥?那么今天就到這里啦...