使用 Karma + Mocha做單元測試
- Karma（
[?kɑrm?]卡瑪）是一個測試運行器，它可以呼起瀏覽器，加載測試腳本狮腿，然后運行測試用例 - Mocha（
[?mo?k?]摩卡）是一個單元測試框架/庫杨名，它可以用來寫測試用例 - Sinon（西農）是一個 spy / stub / mock 庫，用以輔助測試（使用后才能理解）
步驟
- 安裝各種工具
npm i -D karma karma-chrome-launcher karma-mocha karma-sinon-chai mocha sinon sinon-chai karma-chai karma-chai-spies - 創(chuàng)建 karma 配置
在karma.conf.js中設定了測試瀏覽器：chrome泽艘、測試路徑：dist/**/*.test.js和dist/**/*.test.css(編譯后的js和css文件)
// 新建 karma.conf.js欲险，內容如下
module.exports = function (config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['mocha', 'sinon-chai'],
client: {
chai: {
includeStack: true
}
},
// list of files / patterns to load in the browser
files: [
'dist/**/*.test.js',
'dist/**/*.test.css'
],
// list of files / patterns to exclude
exclude: [],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['ChromeHeadless'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false,
// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity
})
}
- 創(chuàng)建 test/button.test.js 文件
單元測試的內容奈搜，其中使用了mocha。
sinon.fake()函數用來判斷某個函數是否被執(zhí)行
const expect = chai.expect;
import Vue from 'vue'
import Button from '../src/button'
Vue.config.productionTip = false
Vue.config.devtools = false
describe('Button', () => {
it('存在.', () => {
expect(Button).to.be.ok
})
it('可以設置icon.', () => {
const Constructor = Vue.extend(Button)
const vm = new Constructor({
propsData: {
icon: 'settings'
}
}).$mount()
const useElement = vm.$el.querySelector('use')
expect(useElement.getAttribute('xlink:href')).to.equal('#i-settings')
vm.$destroy()
})
it('可以設置loading.', () => {
const Constructor = Vue.extend(Button)
const vm = new Constructor({
propsData: {
icon: 'settings',
loading: true
}
}).$mount()
const useElements = vm.$el.querySelectorAll('use')
expect(useElements.length).to.equal(1)
expect(useElements[0].getAttribute('xlink:href')).to.equal('#i-loading')
vm.$destroy()
})
it('icon 默認的 order 是 1', () => {
const div = document.createElement('div')
document.body.appendChild(div)
const Constructor = Vue.extend(Button)
const vm = new Constructor({
propsData: {
icon: 'settings',
}
}).$mount(div)
const icon = vm.$el.querySelector('svg')
expect(getComputedStyle(icon).order).to.eq('1')
vm.$el.remove()
vm.$destroy()
})
it('設置 iconPosition 可以改變 order', () => {
const div = document.createElement('div')
document.body.appendChild(div)
const Constructor = Vue.extend(Button)
const vm = new Constructor({
propsData: {
icon: 'settings',
iconPosition: 'right'
}
}).$mount(div)
const icon = vm.$el.querySelector('svg')
expect(getComputedStyle(icon).order).to.eq('2')
vm.$el.remove()
vm.$destroy()
})
it('點擊 button 觸發(fā) click 事件', () => {
const Constructor = Vue.extend(Button)
const vm = new Constructor({
propsData: {
icon: 'settings',
}
}).$mount()
//判斷callback是否被執(zhí)行
const callback = sinon.fake();
vm.$on('click', callback)
vm.$el.click()
expect(callback).to.have.been.called
})
})
- 創(chuàng)建測試腳本
在 package.json 里面找到 scripts 并改寫 scripts
Windows 有可能不支持 && 符號盯荤，解決辦法是：將 dev-test 對應的命令parcel watch test/* --no-cache & karma start分別運行馋吗，運行方式如下- 新開一個 Git Bash 窗口運行
npx parcel watch test/* --no-cache - 再開一個 Git Bash 窗口運行
npx karma start
- 新開一個 Git Bash 窗口運行
"scripts": {
"dev-test": "parcel watch test/* --no-cache & karma start",
"test": "parcel build test/* --no-minify && karma start --single-run"
},
-
運行測試腳本
-
要么使用
npm run test一次性運行截圖 -
要么使用
npm run dev-test進行 watch 運行截圖
-
成果
如此一來，你開發(fā)的時候新開一個命令行窗口運行 npm run dev-test 就可以實時查看測試結果秋秤。
如果你只想看一次結果宏粤，就只用運行 npm run test
