javascript - 使用vue官方脚手架进行单元测试，如何覆盖到watch里的变量？

问题描述

问 题

组件中的watch如下:

player(isPlay) {
  if (isPlay) {
    this.playState = 'play'
  } else {
    this.playState = 'pause'
  }
}

测试文件Home.spec.js中的相关用例如下

it('播放状态切换', () => {
  const Constructor = Vue.extend(Home)
  const vm = new Constructor().$mount()
  vm.playerShow = true
  Vue.nextTick( () => {
    expect(vm.playState).to.equal("play")
  })
  vm.playerShow = false
  Vue.nextTick( () => {
    expect(vm.playState).to.equal("pause")
    done()
  })
})

这样写了之后查看覆盖率报告,发现组件中watch部分代码没有被覆盖(都是红的)
请教下如何写用例才能够把watch的代码覆盖到

解决方案

虽然不知道是不是正确的做法,这样写了之后,就能覆盖到watch的代码了...

it('播放状态切换', () => {
  const Constructor = Vue.extend(Home)
  const vm = new Constructor().$mount()
  vm._watchers[0].cb(true)
  Vue.nextTick( () => {
    expect(vm.playState).to.equal("play")
  })
  vm._watchers[0].cb(false)
  Vue.nextTick( () => {
    expect(vm.playState).to.equal("pause")
    done()
  })
})

这篇关于javascript - 使用vue官方脚手架进行单元测试，如何覆盖到watch里的变量？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！