vue单元测试

一. 什么是单元测试

单元测试就是测试最小单元(一个方法，一个组件)

修改js模块功能，其它模块也受影响，很难快速定位bug
多人开发代码越来越难以维护,不方便迭代,代码无法重构

二.TDD & BDD

Test-Driven Development, 测试驱动开发
- 先编写测试用例代码，然后针对测试用例编写功能代码，使其能够通过
- 很好的诠释了代码即文档
- 清晰地了解软件的需求
Behavior Driven Development，行为驱动开发
- 系统业务专家、开发者、测试人员一起合作，分析软件的需求，然后将这些需求写成一个个的故事。开发者负责填充这些故事的内容
- 保证程序实现效果与用户需求一致。

javascript

let parent = (str) => { // name=zfpc
    let obj = {};
    str.replace(/([^&=]*)=[^&=]*)/g, function () {
        obj[arguments[1]] = arguments[2];
    });
    return obj;
}
let stringify = (obj) => {
    let arr = [];
    for (const key in object) {
        if (Object.hasOwnProperty.call(object, key)) {
            arr.push(`${key}-${obj[key]}`);
        }
        return arr.join("&"); // name = zfpx
    }
}
// 前端测试的时候 1）去自测代码 不会保留测试代码 测试代码会混在源码中
console.log(parent("name=zfpx"));
console.log(parent("name=1"));
console.log(stringify({name:'zfpx'}));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

javascript

import { expect } from 'chai'
// import Vue from 'vue';
import { shallowMount, mount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'


// describe('HelloWorld.vue', () => {
//   it('传递属性后是否正常显示结果', () => {
//     // 原生自己测试vue
//     // extend 方法可以更具实例创建一个类
//     let Constructor = Vue.extend(HelloWorld);
//     // 把组件进行挂载
//     // vm.$set mocha 调用的时候，集成了jsdom
//     let vm = new Constructor({
//       propsData: { msg: 'hello' }
//     }).$mount();
//     expect(vm.$el.querySelector('h1').innterHTML).to.be.contain('hello')
//     // 
//   })
// })


// mount
// describe('HelloWorld.vue', () => {
//   it('传递属性后是否正常显示结果', () => {
//     let wrapper = mount(HelloWorld);
//     wrapper.setProps({ msg: 'hello' });
//     expect(wrapper.find('h1').to.be.contain('hello'));
//   })
// })


describe('HelloWorld.vue', () => {
  it('传递属性后是否正常显示结果', () => {
    const msg = 'new message'
    const wrapper = shallowMount(HelloWorld, {
      propsData: { msg }
    })
    expect(wrapper.text()).to.include(msg)
  })
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

vue单元测试 #

一. 什么是单元测试 #

二.TDD & BDD #

vue单元测试

一. 什么是单元测试

二.TDD & BDD