使用 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-
创建 karma 配置
// 新建 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 }) } -
创建 test/button.test.js 文件（每个组件放一个文件进行测试）
const expect = chai.expect; // 引入测试框架 import Vue from 'vue' // 引入Vue 和 组件 import Button from '../src/button' Vue.config.productionTip = false Vue.config.devtools = false describe('[单元测试的组件]', () => { it('Button组件存在', () => { // 单元测试描述 expect(Button).to.be.ok // 断言：Button组件存在 }) it('可以设置icon', () => { const Constructor = Vue.extend(Button) // 传入Button对象，形成构造函数 const vm = new Constructor({ // vm为一个实例对象，vm挂载后，dom元素就是vm.$el propsData: { // 模拟父组件传给子组件的数据 icon: 'settings' } }).$mount() // 挂载Vue实例，可以不挂载在dom元素上，空挂载，但测css属性时不能空挂载（空挂载无法测css属性）。 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 触发 click 事件', () => { const Constructor = Vue.extend(Button) const vm = new Constructor({ propsData: { icon: 'settings', } }).$mount() const callback = sinon.fake(); vm.$on('click', callback) vm.$el.click() expect(callback).to.have.been.called }) }) 运行测试脚本
-
要么使用
npm run test一次性运行截图 要么使用
npm run dev-test进行 watch 运行
截图
成果
如此一来，你开发的时候新开一个命令行窗口运行 npm run dev-test 就可以实时查看测试结果。
如果你只想看一次结果，就只用运行 npm run test
用Travis CI持续集成
搭建上面的单元测试框架，我们现在测试已经很方便了，只需一条命令。
但是，有没有可能更加方便呢？能不能不敲命令呢？？
可以。只需要用上持续继承，"雇一个机器人"帮我们，让"机器人帮我们自动测试"，这个机器人就是
https://travis-ci.org/
只要注册号，绑定我们的github和对应项目的仓库，同时在我们项目里加入配置文件，每当我们提交代码的时候，就可以在上面看到测试开始啦。
image.png
测试结果也会记录下来
image.png
配置文件如下
在根目录创建.travis.yml，写入：
language: node_js
node_js: // 需要测试的node.js版本
- "8"
- "9"
- "10"
addons: // 在小机器人上安装的插件
chrome: stable // chrome 稳定版
sudo: required // 下面照抄
before_script:
- "sudo chown root /opt/google/chrome/chrome-sandbox"
- "sudo chmod 4755 /opt/google/chrome/chrome-sandbox"
