最近公司想要從mocha+karma的前端單元測試方式轉換到Jest，然后任務就分配給我了，好吧，在這之前連單元測試是什么都不知道。硬生生的開始寫單元測試了，寫這篇文章的初衷是因為在配置Jest的過程中有好多問題，百度幾乎搜索不到，無奈本人英文太差，卻又不得不去看英文文檔。然后，想要寫篇文章，記錄下其中遇到的一些問題以及解決問題的方法，當然，現在還有不少問題沒有解決，等到解決了之后再來更新...orz。
一，QUICK START時遇到的問題
首先，通過我們特別熟悉的命令，哦對，前提是你要安裝了node，git。還要全局安裝vue-cli，后面會把版本信息貼上的，這里不多說廢話了。我們通過vue init webpack <yourname>命令來構建初始化的項目。不過在選擇上，我們要選擇Jest來做單元測試。
這樣我們就得到了一個初始化，擁有Jest單元測試的項目了。版本信息如下：
那么我們去試一下，查看package.json，我們發現啟動單元測試的命令是npm run unit。哎？怎么報錯了？嗯..你的報錯信息應該可能大概也許是下面這個樣子：
這是我們在使用Jest時遇到的第一個問題，解決的方式很簡單，在test目錄下的jest.config.js的配置中添加一項：
然后，再試一下npm run unit，我們發現測試通過了。至此，最基本的項目配置已經完成並順利運行了。
我們繼續往下看。
二、通過script標簽引入的插件無法找到的問題。
我們先來想象一下這樣的場景，我們在開發時候需要引入一個插件，就比如是百度地圖API吧，但是又無法用npm install來安裝（因為npm倉庫沒有這個庫），所以我們在index.html中用script標簽引入了BMap。就像這樣：
接下來我們要在我們的項目中使用它，很簡單，我們直接在初始化項目中的HelloWorld.vue中的mounted鈎子里console.log(BMap)一下，在控制台中我們就可以看到一個對象，那么我們測試一下看看？
果然報錯了，BMap is not defined。
在測試環境下，我們使用jest也需要引入開發環境下的各種插件，形成一個獨立的環境體系，當然，我們也可以通過其它手段來造假數據。這個我們后面再說，既然找不到BMap，那么怎么辦呢？
jest的配置中有一個globals配置項，我們是否可以在它身上做點文章?
首先在jest.conf.js中，我們可以在globals的配置項上加上一個名為BMap的對象，就像這樣：
再運行一下測試，我們發現跑通了。但是可能還會有個問題，如果你在vue中用一個變量來暫存一個百度地圖中的方法可能還會出現“找不到BMap.xxx”這樣的錯誤。那么實際上，解決的方法也比較簡單，給BMap對象下寫入一個對應的方法就可以了。比如：
就像這樣，實際上就是為jest的全局環境掛載上相應的對象。但是，個人覺得這種方法有點取巧。並不是特別的好的處理方式，比如說我用了幾十個方法難道要寫幾十個假的構造函數么？不過目前還沒有找到更好的方法。這種處理方式還是比較簡單易懂的。
最后，如果我們想要給vue的單文件組件（通常我們用腳手架生成的項目都是這樣的），還需要安裝Vue Test Utils插件來幫助我們快速的完成測試用例的書寫。
實際上在使用過程中，主要有兩類問題，一個是環境配置的問題，要記住在寫jest測試用例的時候，需要引入各依賴的文件，就像在main.js中那樣。另外一個就是在寫實際具體的測試用例的時候所遇到的具體的語法寫法等問題。比如vue-router，vuex，axios的使用方法等都是比較容易解決的部分，在網上可以很簡單的搜到使用方法，我就不再重復的去寫了。jest官網和Vue Test Utils實際上說的都比較清楚了。
2019-03-22更新：
本以為在使用了globals配置項后可以比較妥善的解決全局環境變量的引入問題，但是在后續的單元測試編寫的過程中會存在莫名其面的情況，就是偶爾會仍舊找不到全局環境下的BMap。
三、filecorverage未覆蓋到的報錯，雖然這種報錯並不會影響你已經完成的單元測試的文件，但是會對覆蓋率產生一定的影響，暫未解決。
四、復雜環境下經常會遇到各種對象找不到的情況，應該是jest測試環境的配置問題，暫未解決。
最后，本文章為工作中遇到的問題的一些記錄，以備查閱。若有錯誤不足，還望不吝指正，互相學習。