vue 单元测试入门

Posted 2021-03-02 bella-chen

组件方法

// 同步方法

m1:function(a,b){
      return a+b
    },

// 异步方法

m2:function(a,b,ab){ 
　　setTimeout(function(){ 
　　　　cb(a+b) 
　　},2000) 
},

单元测试

   // 同步方法
  it(‘test function m1‘, () => {
    const m1 = vm.m1;
    expect(m1(2,3)).toEqual(5)
  });

  // 异步方法
  it(‘aysnc m2 should return 3‘, () => {
    const m2 = vm.m2;
    m2(1,2,data=>{
      expect(data).toEqual(3)
     })
  });

 

使用promise 需要安装  

npm i es6-promise --save-dev

import promise from ‘es6-promise‘;

// 兼容 Promise
promise.polyfill();

 

断言的写法

export(m1(2,3)).to.equal(5);

m1(1,2).should.eq(3);

assert.equal(m1(1,2),3)

 

mock 的使用

getmes:funciton(cb){
　　// 假设这个接口会返回4
　　axios.get(‘xxratatatatta‘)
   var res = cb();
　　this.dataa = res;
}

describe(‘HelloWorld.vue‘, () => {
  const Constructor = Vue.extend(HelloWorld)
  const vm = new Constructor().$mount()

  it(‘接口被请求‘,()=>{
     // spy stud
　　 let axiosstud = sinon.stub(axios,‘get‘);
　　let callback = sinon.spy(()=>{
　　　　return 5
　　})
　　const getmes = vm.getmes;
　　expect(getmes(callback)).to.equal(4)

  })
    
})