vue项目中添加单元测试

2019独角兽企业重金招聘Python工程师标准>>>

第一部分：vue单元测试官网

• vue单元测试官网
• Vue Test Utils

第二部分：如何在现有的项目中生成vue单元测试（用vue-cli生成的项目）

一、用官网推荐的@vue/test-utils方式(karma+mocha+@vue/test-utils+chai)

1. 用vue-cli生成项目：
   • 注意：在“Pick a test runner”时，选择Karma+mocha方式
2. 安装@vue/test-utils插件

• 按照如下安装：

npm install @vue/test-utils --save-dev

3.新建vue项目：

//counter.vue
<template>
  <div>
    <h3>Counter.vue</h3>
    <div class="num">{{ count }}</div>
    <button @click="increment">自增</button>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        count: 0
      }
    },

    methods: {
      increment () {
        this.count++
      }
    }
  }
</script>

4. 新建测试代码

import Vue from 'vue'
import Counter from '@/components/counter'
//引入@vue/test-utils
import {mount} from '@vue/test-utils'

describe('Counter.vue', () => {

  it('点击按钮后, count的值应该为1', () => {
    //获取组件实例
    const Constructor = Vue.extend(Counter);
    //挂载组件
    const vm = new Constructor().$mount();
    //获取button
    const button = vm.$el.querySelector('button');
    //新建点击事件
    const clickEvent = new window.Event('click');
    //触发点击事件
    button.dispatchEvent(clickEvent);
    //监听点击事件
    vm._watcher.run();
    // 断言:count的值应该是数字1
    expect(Number(vm.$el.querySelector('.num').textContent)).to.equal(1);
  })

  it('未使用Vue-test-utils: 正确渲染h3的文字为Counter.vue', () => {
    const Constructor = Vue.extend(Counter);
    const vm = new Constructor().$mount();
    const H3 = vm.$el.querySelector('h3').textContent;
    expect(H3).to.equal('Counter.vue');
  })

  it('使用Vue-test-Utils: 正确渲染h3的文字为Counter.vue', () => {
    const wrapper = mount(Counter);
    expect(wrapper.find('h3').text()).to.equal('Counter.vue');
  })

})

5. 启动测试 npm run unit(出现如下提示表明成功)

二、用karma+mocha+chai方式

1. 复制所需要的单元测试文件

• build/webpack.test.conf.js
• config/test.env.js
• 复制整个test文件夹

2. 安装karma+mocha+chai模块

• npm i -D karma karma-webpack phantomjs-prebuilt karma-phantomjs-launcher karma-phantomjs-shim karma-chrome-launcher karma-sourcemap-loader mocha karma-mocha sinon chai sinon-chai karma-sinon-chai karma-spec-reporter karma-coverage

3. 修改package.json

• scripts项目启动里添加："unit":"karma start text/unit/karma.conf.js --single-run"

4. 修改test目录下的index.js文件（总提示.scss文件出错的解决办法）

• 原先代码

const srcContext = require.context('../../src',true,/^\.\/(?!main(\.js)?$)/)

• 改为

const srcContext = require.context('../../src',true,/^\.\/(style$)/)

4. 启动单元测试

• npm run test

转载于:https://my.oschina.net/yxmBetter/blog/2877978