初次接觸單元測試,通過vue-test-utils的官方推薦配置發現一堆問題,按官方的配置來看是vue-cli2.x版本的,這裏記錄下cli3.x版本下的初步搭建過程
技術棧
karma+mocha+chai+@vue/test-utils ( vue-cli3.x版本下 )
首次搭建
創建項目時沒有選擇開啓單元測試,單元測試爲後續手動添加
單元測試相關的依賴列表:
然後按照搬了官方的測試用例,在測試用例中發現IDE提示在從chai中引入expect時報錯
再次添加依賴
雖然前面已經添加了karma-chai,但既然報錯那就再添加下chai吧。
繼續看到IDE提示'describe'以及'it' is not defined
繼續配置
這裏需要在eslintrc.js的env中添加mocha
運行後報錯,Cannot find module './webpack.config.js'
最後修改
由於用vue-cli3.x創建的項目根目錄不再有webpack.config.js,所以需要修改karma.conf.js中引入webpack.config.js的路徑
改爲
再次運行,總算成功了。
總結
雖然在vue-cli3.x下單元測試成功運行了,但這次僅嘗試了karma+mocha+chai的方式,測試用例也非常基礎,並且懷疑某些依賴屬於重複安裝,例如karma-chai和chai,應該能夠通過改寫配置進行優化。
希望帶佬們能對上述中有問題的地方提出改進意見,這裏統一感謝。
轉載請註明出處。