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

发布于 2022-09-04 22:19:22 字数 1644 浏览 46 评论 0

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

...
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值,,,

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

苍白女子 2022-09-11 22:19:22

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

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

迷离° 2022-09-11 22:19:22

请问你解决了吗?我也遇到同样的问题。

澜川若宁 2022-09-11 22:19:22

@HongHaiyang 这个问题你解决了吗?我也碰到一样的问题

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文