vue 单元测试,用的karma Jasmine, 组件中的方法涉及到调用后台API返回的数据,请问怎么写测试?

HongHaiyang
  • 104

之前没写过单元测试,现在需要为项目写单元测试。

...
methods: {  
      getNodeGroups(){
        //获取nodegroupname
        this.$http.get('/api/nodegroupname/storage').then((response) => {
          if (response) {
            console.log(response);
            this.groupnames = response.body;
          }
        });
      }
     }
...

比如说我这个vue组件里的方法是这样的,调用了nodejs 后台的api返回了查到的数据,查到的数据再赋值给vue data()里面的变量。

请问我在写测试用例的时候怎么写这个方法的测试呢? 能不能我直接给定这个方法里的response={body:[1,2,3,]}
然后看看groupnames是否等于[1,2,3]呢?

import Vue from 'vue'
import VueResource from 'vue-resource'
import ElementUI from 'element-ui'

import bookingApp from '../../frontend/views/booking/App.vue'

Vue.use(ElementUI)
Vue.use(VueResource)

describe('test booking', () => {
    it('has a mounted hook', () => {
        expect(typeof bookingApp.mounted).toBe('function')
    })
    it('组件加载后的状态', () => {
        //bookingApp生成vue实例,并用$mount()模拟挂在状态
        let vm = new Vue(bookingApp).$mount()
        // nodes
        expect(vm.nodes).toEqual([])
        // nodeChecked
        expect(vm.nodeChecked).toEqual([])
        // groupnames
        expect(vm.groupnames.length).toEqual(0)
        // mobile
        expect(vm.mobile).toEqual([])
    })
    // 测试组件中的方法
    it('测试方法',()=>{
        let vm =new Vue(bookingApp).$mount()

        vm.getNodeGroups().response={body:[1]}
        
        expect(vm.groupnames.length).toEqual(1)
    })
})

这是我的测试用例,在“测试方法”中,karma会报错

Cannot set property 'response' of undefined

。。。貌似并不能直接模拟方法内的response值,,,

求问这种情况怎么写测试?小弟在这里先谢过!

回复
阅读 4.2k
3 个回答
microbingbing
  • 2
新手上路,请多包涵

这个是不是可以用mock数据来测试呢

spyOn(vm.$http, 'get').and.returnValue({body:[1,2,3,]})

宣传栏