vue组件单元测试

2018-12-23 本文已影响0人雷神的铁粉

一开始我是打算把数据库的测试也准备写一篇，但是发现需要创建表格之间的关系，增删查改的过程比较繁杂又多，先把前端vue的测试给写了也给自己的知识点做个备份，学而不思则、思而不学现在就开始do it。

Karma

karma测试库是一个测试管理工具，可以帮你启动一个HTTP服务器运行你的代码文件，也可以通过其插件可以快速集成到各种环境中。例如：本地环境、持续集成环境。

karma安装

npm install karma-cli -g
npm install karma --save-dev
npm install karma-mocha --save-dev
npm install karma-chai --save-dev

配置文件
新建一个karma.conf.js文件粘贴以下内容，frameworks里面还包含sinon-chai是用来辅助测试的后面会讲到。

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
  });
};

命令
package.json文件中添加需要的脚本

"scripts": {
    "dev-test": "parcel watch test/* --no-cache & karma start",
    "test": "parcel build test/* --no-cache --no-minify && karma start --single-run"
}

Chai

chai是一个断言库，有多种的断言风格，目前有should、expect和assert
想熟悉语言的话推荐API中文文档里面有很多chai的用例
当然断言风格主要还是看个人的使用习惯，下面简单介绍一下expect它的断言使用语法

安装

npm i -D chai

用例

// 相等或不相等
expect(1 + 2).to.be.equal(3);
expect(1 + 2).to.be.not.equal(4);
expect(foo).to.be.deep.equal({ bar: 'baz' });

// 布尔值为true
expect('everthing').to.be.ok;
expect(false).to.not.be.ok;

// typeof
expect('test').to.be.a('string');
expect({ foo: 'bar' }).to.be.an('object');
expect(foo).to.be.an.instanceof(Foo);

// include
expect([1,2,3]).to.include(2);
expect('foobar').to.contain('foo');
expect({ foo: 'bar', hello: 'universe' }).to.include.keys('foo');

// empty
expect([]).to.be.empty;
expect('').to.be.empty;
expect({}).to.be.empty;

// match
expect('foobar').to.match(/^foo/);

Mocha

Mocha 是一个单元测试框架，就是一个用来写测试用例的运行测试工具

先导出一个加法模块 add.js

function add(x, y) {
   return x + y;
}
 
module.exports = add;

接下来写测试加法脚本 add.test.js，建议测试脚本和要执行的文件模块同名，
每一个 describe 描述模块相当于一个大厂房，而 it 里面信息比如成一个小机房，每个机房都有你将要执行的东西在里面。

var add = require('./add.js');
var expect = require('chai').expect;

describe('一个加法测试', function() {
  it('1 加 1 应该等于 2', function() {
    expect(add(1, 1)).to.be.equal(2);
  });
});

文件测试

按钮组件 src/button.vue

<template>
  <button class="default" :class="color" @click="$emit('click');">
    <slot></slot>
  </button>
</template>

<script>
export default {
  props: {
    color: {
      type: String
    }
  }
};
</script>

<style scoped>
.default {
  cursor: pointer;
  width: 200px;
  height: 40px;
  line-height: 40px;
  border-width: 0px;
  border-radius: 4px;
  outline: none;
  font-family: Microsoft YaHei;
  color: black;
  font-size: 15px;
  background: #f8f8f8;
}
.blue {
  background: #1e90ff;
}
</style>

添加组件 src/App.vue

<template>
  <div id="app">
    <test-button color="blue" @click="counter += 1;">Click me</test-button>
  </div>
</template>

<script>
import TestButton from "./button";

export default {
  name: "App",
  components: {
    TestButton
  }
};
</script>

<style></style>

测试文件 test/button.test.js

const expect = chai.expect;
import Vue from 'vue'
import Button from '../src/button'

Vue.config.productionTip = false
Vue.config.devtools = false

describe('Button', () => {
  it('存在 button', () => {
    expect(Button).to.exist  // expect语法期待组件的存在
  })

  it('点击 button', () => {
    const div = document.createElement('div')
    document.body.appendChild(div)
    const Constructor = Vue.extend(Button) // 使用button
    const vm = new Constructor({
      propsData: {
        color: 'blue',
      }
    }).$mount(div)
    const callback = sinon.fake(); // sinon记录一个调用
    vm.$on('click', callback) // 监听回调
    vm.$el.click() // click执行
    expect(callback).to.have.been.called // 期待这个事件被调用
  })
})

npm run dev 最后执行结果, 这里错误的示范就不做记录了，看到的朋友自己花时间跑一次就知道坑在哪了~

...
√  Built in 193ms.

dist\button.test.js         270.2  B    120ms
dist\button.test.map            0 KB     65ms
...
HeadlessChrome 0.0.0 (Windows 10 0.0.0): Executed 1 of 1  SUCCESS (0.016 secs / 0.008 secs)

vue组件单元测试

Karma

Chai

安装

用例

Mocha

文件测试

猜你喜欢

热点阅读