vue-test-utils初使用詳解

2019-11-19 11:29:02

字體：大中小

來源：轉載

供稿：網友

vue-test-utils官網：https://vue-test-utils.vuejs.org/zh/

依賴包

請安裝它們👇

yarn add @vue/test-utils vue-jestyarn jestjest-serializer-vueyarn add babel-jest babel-core@^7.0.0-bridge.0

⚠️：vue-jest依賴與babel-core。我們的環境現在都是babel7，通過npm安裝的babel-core默認的還是6版本，所以要指定babel-core安裝的系列為7，否則會出現解析問題。

配置

jest配置：告訴jest它需要哪些額外的配置

jest相關的配置可以配置在package.json中或者單獨的jest.config.json文件中：

// jest.config.json{      "moduleFileExtensions": [    "js",    "json",    "vue"  ],  "transform": {    "^.+//.js$": "<rootDir>/node_modules/babel-jest", // jest使用babel解析js    ".*//.(vue)$": "<rootDir>/node_modules/vue-jest" // jest對vue單文件的解析  },  "snapshotSerializers": [    "<rootDir>/node_modules/jest-serializer-vue"   ],  "moduleNameMapper": {    "^@/(.*)$": "<rootDir>/src/$1", //為了解析webpack配置的alias字段    "^tim-architect/(.*)$": "<rootDir>/tim-architect/$1"  },  "transformIgnorePatterns": [    "node_modules/(?!(yourModuleName))"  ]}

⚠️：transformIgnorePatterns的默認配置是["node_modules"]，表示所有的node_modules下的包都不需要babel解析。但是一些3rd庫提供的文件仍然是未編譯的es6語法，jest在解析時會報語法錯誤。因此需要指定白名單，需要那些node_modules下的包被babel轉換。

babel配置：告訴babel你需要用哪些工具去處理一坨（💩香么？💩 ： 💩 ）代碼

推薦使用babel.config.js（babel需要轉換的node_modules同樣生效）而不是.babelrc（當前項目生效）。

{  ..., env: {  test: {   presets: [[    '@babel/env',    {     modules: 'auto', // 現在不能通過webpack來解析s6 module，需要使用babel來解析，所以要開啟     targets: {      node: 'current' // 指定環境為當前node版本，減少解析不識別語法的范圍     }    }   ]],   plugins: [[    '@babel/plugin-transform-runtime', {     corejs: 2,     useESModules: false // 不允許使用es modules，babel需要通過@babel/plugin-transform-modules-commonjs將es module轉換為commonjs模塊解析    }   ]  ] } }}

⚠️：通過babel的env.test指定jest測試時需要的babel配置（同webpack轉換解析時不同），jest會自動識別env.test的配置。

單測文件

理解：

單元測試不應該追求代碼的覆蓋率；
單元測試主要是為了測試組件UI，數據驅動后UI的變化在可控范圍之內；
測試組件應以純組件為主（業務組件邏輯過于復雜或經常變動，涉及到的引入文件過多，不便于測試所有的功能性），純組件作為項目的基礎組件功能性上基本不變化。

遇到的問題總結

1.異步生命周期

vue-test-utils提供了對異步請求方法的mock，文檔如下：https://vue-test-utils.vuejs.org/zh/guides/testing-async-components.html

但是對于生命周期函數是異步的情況要怎么處理呢？以下是親測有效但是有點麻煩的姿勢：

// 假設在異步生命周期方法中，調用的函數是init，那我們就通過jest.fn()提供的方法進行mockinit.default = jest.fn().mockImplementation(() => Promise.resolve(yourValue))// 在Jest提供的全局方法中，調用異步生命周期的方法，以保證每個斷言都是在生命周期之后beforeEach(async () => { init.default.mockClear() await wrapper.vm.$mount() // 異步生命周期里會調用init方法})

2.如果測試文件中包含require.context，請看這一條：

這時候沒有webpack怎么辦？當然是用別人踩過坑的方法救急！

說實話，如果組件引用了這種東西，我覺得它不夠純潔，還是不要管它好了亚洲香蕉成人av网站在线观看_欧美精品成人91久久久久久久_久久久久久久久久久亚洲_热久久视久久精品18亚洲精品_国产精自产拍久久久久久_亚洲色图国产精品_91精品国产网站_中文字幕欧美日韩精品_国产精品久久久久久亚洲调教_国产精品久久一区_性夜试看影院91社区_97在线观看视频国产_68精品久久久久久欧美_欧美精品在线观看_国产精品一区二区久久精品_欧美老女人bb