jest 學習入門
/* 2019.07.15 夏 晴*/
今天開始正式接觸Jest，從前也許聽說過，但從來沒有了解過。
今天很高興有機會可以進入Jest世界，準備邊學邊記錄學習過程，以便自己之後的回顧以及希望來看我博客的人可以更容易的學習Jest。
什麼是Jest
Jest is a delightful JavaScript Testing Framework with a focus on simplicity.
這是我引用官網的一句介紹，簡單來說Jest是一個JavaScript測試框架，我們可以在這裏配置，測試我們的代碼。
向vue項目模板中部署jest
1、安裝jest：npm install --save-dev jest @vue/test-utils
2、添加 jest 運行配置
在package.json中定義一個單元測試的腳本
3、在 Jest 中處理單文件組件
爲了告訴 Jest 如何處理 *.vue 文件，我們需要安裝和配置 vue-jest 預處理器：npm install --save-dev vue-jest
接下來在 package.json 中創建一個 jest 塊：
4、運行 npx babel-upgrade --write --install
我之前模板中原使用babel-preset-stage-0 6.24.1，但從發佈7版本之後，刪除了大量之前版本Babel’s Stage presets，所以我們需要通過該命令進行升級，解決babel版本不兼容問題。
運行結果：package.json、package-lock.json、.babelrc將會更新。
更新後請確認我們上述修改沒有變動，若有變動，修改回來。
5、修改.babelrc配置
測試：
1、測試文件
2、測試配置
3、運行
update
1、將jest配置從package.json摘出
注： test/specs 中放置測試配置； test/unit 中放置jest配置
更改package.json中的配置，並可以把原 jest 配置刪除
運行結果：
2、添加覆蓋率測試
測試含義：
- %stmts是語句覆蓋率（statement coverage）：是不是每個語句都執行了？
- %Branch分支覆蓋率（branch coverage）：是不是每個if代碼塊都執行了？
- %Funcs函數覆蓋率（function coverage）：是不是每個函數都調用了？
- %Lines行覆蓋率（line coverage）：是不是每一行都執行了？
注：
collectCoverage：開啓覆蓋率測試
collectCoverageFrom：收集測試覆蓋率信息的文件
coverageReporters：配置測試覆蓋率報告
運行結果：
3、添加快照測試
install工具：npm install --save-dev jest-serializer-vue
測試：
自動生成__snapshots__文件夾，存放生成的快照文件
生成快照後，更改我們之前的hello.vue頁面
再次測試運行，結果如下
測試報錯，因爲渲染出來的頁面和之前不符
再將hello.vue添加的那個語句註釋，在跑測試，結果如下：
這就是我這兩天學習jest，安裝測試的步驟，如果有問題，請多多指教，謝謝