Vue 2.X 版本若要結合 TypeScript 的模式導入單元測試，其中要繞掉的坑比想像中複雜許多。因此，這一篇是筆記下相關的設定值，來減少日後要再度研究的煩惱。當然，你也可以使用 Sinon, Mocha 或是 Chai…等，但如此一來，你就得花時間研究「測試環境專用的編譯工具、打包工具……等」，那花費的工夫實在太大了些。
準備步驟
1. package.json 設定檔
新增以下指令和檔案，如果有漏掉的，請自行看 Terminal 來除錯。
npm i -D <套件 1> <套件 2> …….
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
{ "scripts": { "test": "jest", "test-clean": "npx jest --clearCache" }, "devDependencies": { "@types/jest": "^26.0.19", "@vue/test-utils": "^1.1.2", "axios-mock-adapter": "^1.19.0", "babel-core": "^7.0.0-bridge.0", "jest": "^26.6.3", "node-sass": "^4.12.0", "sass-loader": "^8.0.2", "ts-jest": "^26.4.4", } } |
2. jest.config 設定檔
新增在根目錄下
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
module.exports = { // 覆蓋率報告開啟 collectCoverage: true, // 覆蓋率母體，這邊為包含所有 .vue 的檔案，但不含 node_modules collectCoverageFrom: ['**/*.vue', '!**/node_modules/**'], moduleFileExtensions: [ 'js', 'ts', 'json', 'vue' ], // 你的測試檔案路徑，用 regex 來統一抓取 testRegex: [ '(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$', '/src/*/*.spec.(ts|js)$/' ], testURL: 'http://localhost/', // 給檔案配置適當的編譯器 transform: { '^.+\\.(js|jsx)$': 'babel-jest', '^.+\\.(ts|tsx)?$': 'ts-jest', '.*\\.(vue)$': 'vue-jest' } } |
3. tsconfig 設定檔
|
1 2 3 4 5 6 7 8 |
// TypeScript 設定檔中，新增 compiler-type 多一個 "jest" { "compilerOptions": { "types": [ "webpack-env","jest" ] } } |
基本概念
1. 用 Vue-Test-Utils 所提供的 shallowMount ，來模擬一個 Vue 檔讀取
2. 承上，讀取進來的 .vue 檔，可以用 .vm 來獲取該 Instance 裡的值，例如 $data
3. 若你要對讀取的生成的 Vue Instance 作操作，那你得參照 Vue Test Utils Wrapper 所提供的說明進行
範例程式碼
Github：Demo Spec.ts
參考資料
1. [vue]使用jest和官方的vue test utils來寫單元測試(vue單元測試系列-5)
2. Vue Test Utils Wrapper
