前端自動化測試，單元測試，集成測試
最近項目中要求做前端單元測試，查閱了很多資料，折騰了一整天，在這裡記一下筆記吧，如果你也正要做前端自動化測試或是前端自動化測試的高手，歡迎留言一起探討。
由於我的項目是vue-cli腳手架搭建的，所以目前只關注了在vue項目中的測試。
首先普及一下基礎概念吧！
單元測試：按空間分割，對每個組件進行測試，我感覺主要是測功能能不能跑通，比如一個函數的返回值是否是預期的。
集成測試：完全是用測試腳本去模擬用戶操作，比如打開瀏覽器，點擊登錄，輸入用戶名，密碼等。
主要流行的測試庫：
單元測試庫：jest、mocha、jasmine...
集成測試庫：puppeteer、casperJs、PhantomJS(停止維護)、chrome-headless
Karma：是一個基於Node.js的JavaScript測試執行過程管理工具（TestRunner）
Mocha：是一個基於Node.js和瀏覽器集合的各種特性的JavaScript測試庫
Vue官網推薦的測試工具有Karma + Mocha + PhantomJS，安裝完成後npm run test就可以看到測試用例運行成功
也可以採用推薦的jest
這裡有一個小坑，如果不做任何修改直接運行，會報錯： SecurityError: localStorage is not available for opaque origins
需要做一點配置的修改：
在 test/unit/jest.conf.js裡面，新增：
testURL: http://localhost/
再運行就會成功啦：
test/unit/jest.conf.js 配置代碼如下
const path = require(path)
module.exports = {
rootDir: path.resolve(__dirname, ../../),
moduleFileExtensions: [
js,
json,
vue
],
moduleNameMapper: {
^@/(.*)$: <rootDir>/src/$1
},
transform: {
^.+\.js$: <rootDir>/node_modules/babel-jest,
.*\.(vue)$: <rootDir>/node_modules/vue-jest
},
snapshotSerializers: [<rootDir>/node_modules/jest-serializer-vue],
setupFiles: [<rootDir>/test/unit/setup],
coverageDirectory: <rootDir>/test/unit/coverage,
collectCoverageFrom: [
src/**/*.{js,vue},
!src/main.js,
!src/router/index.js,
!**/node_modules/**
],
testURL: http://localhost/
}
還可以在項目中引入 vue-test-utils 這個包，可以極大的簡化寫法
沒有引入之前的代碼：
import Vue from vue
import HelloWorld from @/components/HelloWorld
describe(HelloWorld.vue, () => {
it(should render correct contents, () => {
const Constructor = Vue.extend(HelloWorld)
const vm = new Constructor().$mount()
expect(vm.$el.querySelector(.hello h1).textContent)
.toEqual(Welcome to Your Vue.js App)
})
})
引入之後的代碼
import { mount } from vue-test-utils
import Vue from vue
import HelloWorld from @/components/HelloWorld
describe(HelloWorld.vue, () => {
it(should render correct contents, () => {
const wrapper = mount(HelloWorld)
console.log(wrapper.find(.hello h1).text())
expect(wrapper.find(.hello h1).text()).toEqual(Welcome to Your Vue.js App)
})
})
參考資料：
Getting Started · Jest
https://vue-test-utils.vuejs.org/zh/guides/#%E5%B8%B8%E7%94%A8%E6%8A%80%E5%B7%A7一起學習前端自動化測試吧，讓我們的技能up up up
推薦閱讀：
