测试方法使用茉莉花

我有以下的测试伟大的工程测试方法使用茉莉花

it('does not render chapter div or error div',() => { 
     const payLoad = chapter; 
     const switcher = 'guild'; 
     var vm = getComponent(payLoad, switcher).$mount(); 
     expect(vm.$el.querySelector('#chapter-card')).toBeNull(); 
     expect(vm.$el.querySelector('#error-card')).toBeNull(); 

    });

要做到这一点，我写的是安装一个部件的helper方法：

const getComponent = (prop1) => { 
     let vm = new Vue({ 
      template: '<div><compd :payLoad="group" :index="index" "></compd ></div></div>', 
      components: { 
       compd, 
      }, 
      data: { 
       payLoad: prop1, 

      }, 

     }) 
     return vm; 
    }

然而

，我有一个方法在我的vue组件compd中。对于simplicitys的缘故，让我们把它叫做

add(num,num){ 
return num+num; 
}

我希望能够写出类似下面的一个测试用例：

it('checks the add method works',() => { 

     expect(compd.add(1,2).toBe(3)); 

    });

我无法弄清楚如何做到这一点。有没有人有任何建议？此处的文档： https://vuejs.org/v2/guide/unit-testing.html 不包括测试方法。

来源

2017-04-24 Programatt

你错过了（compd.add（1,2）' – thanksd

谢谢，但这不是问题 – Programatt

它应该'expect（compd.add（1,2））。toBe（3）' – thanksd

源代码vue repo

正如你所看到的方法被简单地称为实例上的

const vm = new Vue({ 
    data: { 
    a: 1 
    }, 
    methods: { 
    plus() { 
     this.a++ 
    } 
    } 
}) 
vm.plus() 
expect(vm.a).toBe(2)

您还可以通过$options访问方法就像在这种情况下（vue source code）

const A = Vue.extend({ 
    methods: { 
    a() {} 
    } 
}) 
const vm = new A({ 
    methods: { 
    b() {} 
    } 
}) 
expect(typeof vm.$options.methods.a).toBe('function')

更新：要测试子组件，请使用$children来访问必要的孩子。例如

var childToTest = vm.$children.find((comp)=>comp.$options.name === 'accordion')` assuming name is set to `accordion`

之后，你可以

childToTest.plus(); 
vm.$nextTick(()=>{ 
    expect(childToTest.someData).toBe(someValue) 
    done(); //call test done callback here 
})

如果你有一个子组件，而不是V型的就可以把ref `

vm.$refs.mycomponent.myMethod()

来源

2017-04-25 09:03:19

测试方法使用茉莉花

回答

相关问题