vue-cli2.0 jest自动化测试报错

发布于 09-11 22:19 字数 5745 浏览 15 评论 0

问题背景

项目是用vue-cli2.0搭的框架,与问题无关的不说了,脚手架集成了jest单元测试,一直没用到,最近领导开会提了自动化测试的事情,正好项目中有jest,于是想把项目中的jest用起来。

问题描述

关于页面的测试用例jest已执行通过了,但是对于异步请求的接口测试用例有一个问题,该问题导致了在执行jest异步测试用例时有问题,我觉得是因为项目中把axios库绑定到了this上了,在浏览器端通过this可以正常访问到axios(实际是在this.__proto__.__proto__上),但是执行jest的时候是在node环境,在node环境打印出来wrapper.vm找不到绑定的axios,应该是node环境中和浏览器环境中的this指向不一样导致的,所以结果在终端打印的接口返回值始终为空。

错误信息

console.log src\views\TestDemo.vue:98
    TypeError: Cannot read property 'adornUrl' of undefined
        at VueComponent._callee$ (E:\jpj-wx\src\views\TestDemo.vue:113:38)
        at tryCatch (E:\jpj-wx\node_modules\babel-runtime\node_modules\regenerator-runtime\runtime.j
s:62:40)
        at Generator.invoke [as _invoke] (E:\jpj-wx\node_modules\babel-runtime\node_modules\regenera
tor-runtime\runtime.js:296:22)
        at Generator.prototype.(anonymous function) [as next] (E:\jpj-wx\node_modules\babel-runtime\
node_modules\regenerator-runtime\runtime.js:114:21)
        at step (E:\jpj-wx\node_modules\babel-runtime\helpers\asyncToGenerator.js:17:30)
        at E:\jpj-wx\node_modules\babel-runtime\helpers\asyncToGenerator.js:35:14
        at new Promise (<anonymous>)
        at new F (E:\jpj-wx\node_modules\babel-runtime\node_modules\core-js\library\modules\_export.
js:36:28)
        at E:\jpj-wx\node_modules\babel-runtime\helpers\asyncToGenerator.js:14:12
        at VueComponent.fetchAppList (E:\jpj-wx\src\views\TestDemo.vue:142:10)
        at VueComponent.handleClick (E:\jpj-wx\src\views\TestDemo.vue:94:12)
        at invokeWithErrorHandling (E:\jpj-wx\node_modules\vue\dist\vue.runtime.common.dev.js:1850:2
6)
        at HTMLButtonElement.invoker (E:\jpj-wx\node_modules\vue\dist\vue.runtime.common.dev.js:2175
:14)
        at HTMLButtonElement.original._wrapper (E:\jpj-wx\node_modules\vue\dist\vue.runtime.common.d
ev.js:6889:25)
        at invokeEventListeners (E:\jpj-wx\node_modules\_jsdom@9.12.0@jsdom\lib\jsdom\living\events\
EventTarget-impl.js:219:27)
        at HTMLButtonElementImpl._dispatch (E:\jpj-wx\node_modules\_jsdom@9.12.0@jsdom\lib\jsdom\liv
ing\events\EventTarget-impl.js:126:9)
        at HTMLButtonElementImpl.dispatchEvent (E:\jpj-wx\node_modules\_jsdom@9.12.0@jsdom\lib\jsdom
\living\events\EventTarget-impl.js:87:17)
        at HTMLButtonElementImpl.dispatchEvent (E:\jpj-wx\node_modules\_jsdom@9.12.0@jsdom\lib\jsdom
\living\nodes\HTMLElement-impl.js:36:27)
        at HTMLButtonElement.dispatchEvent (E:\jpj-wx\node_modules\_jsdom@9.12.0@jsdom\lib\jsdom\liv
ing\generated\EventTarget.js:61:35)
        at Wrapper.trigger (E:\jpj-wx\node_modules\@vue\test-utils\dist\vue-test-utils.js:3759:16)
        at _callee$ (E:\jpj-wx\test\unit\specs\TestDemo.spec.js:79:34)
        at tryCatch (E:\jpj-wx\node_modules\babel-runtime\node_modules\regenerator-runtime\runtime.j
s:62:40)
        at Generator.invoke [as _invoke] (E:\jpj-wx\node_modules\babel-runtime\node_modules\regenera
tor-runtime\runtime.js:296:22)
        at Generator.prototype.(anonymous function) [as next] (E:\jpj-wx\node_modules\babel-runtime\
node_modules\regenerator-runtime\runtime.js:114:21)
        at step (E:\jpj-wx\node_modules\babel-runtime\helpers\asyncToGenerator.js:17:30)
        at E:\jpj-wx\node_modules\babel-runtime\helpers\asyncToGenerator.js:35:14
        at new Promise (<anonymous>)
        at new F (E:\jpj-wx\node_modules\babel-runtime\node_modules\core-js\library\modules\_export.
js:36:28)
        at Object.<anonymous> (E:\jpj-wx\node_modules\babel-runtime\helpers\asyncToGenerator.js:14:1
2)
        at Object.asyncFn (E:\jpj-wx\node_modules\_jest-jasmine2@21.2.1@jest-jasmine2\build\jasmine_
async.js:124:345)
        at resolve (E:\jpj-wx\node_modules\_jest-jasmine2@21.2.1@jest-jasmine2\build\queue_runner.js
:46:12)
        at new Promise (<anonymous>)
        at mapper (E:\jpj-wx\node_modules\_jest-jasmine2@21.2.1@jest-jasmine2\build\queue_runner.js:
34:499)
        at promise.then (E:\jpj-wx\node_modules\_jest-jasmine2@21.2.1@jest-jasmine2\build\queue_runn
er.js:74:39)
        at process._tickCallback (internal/process/next_tick.js:68:7)

相关代码

// vue代码
<button id="btn" @click="handleClick">异步请求数据</button>

handleClick() {
  this.fetchAppList().then(data => {
    this.list = data
  })
}

async fetchAppList() {
  const rs = await this.$axios({
    // 下面一行报错,this取不到$axios,继而取不到adornUrl方法
    url: this.$axios.adornUrl('/sapi/appList'),
    method: 'get'
  })
  const { data: { code, msg, appList } } = rs
  if (code !== 0) {
    this.$vux.toast.show({
      type: 'warn',
      text: msg || '服务访问异常',
      isShowMask: true
    })
    return false
  }
  return appList
}

// jest代码
describe('测试异步', () => {
  it('测试点击事件请求接口', done => {
    const wrapper = shallowMount(TestDemo)
    wrapper.find('#btn').trigger('click')
    wrapper.vm.$nextTick(() => {
      expect(wrapper.vm.list).toEqual([])
      done()
    })
  })
  it('测试第三方库解决异步问题', async () => {
    const wrapper = shallowMount(TestDemo)
    wrapper.find('#btn').trigger('click')
    await flushPromises()
    expect(wrapper.vm.list).toEqual([])
  })
  // 下面的用例无法解决this的问题
  it('测试直接传入vm', done => {
    const wrapper = shallowMount(TestDemo)
    wrapper.vm.fetchAppList(wrapper.vm).then(data => {
      console.log(data)
      wrapper.vm.$nextTick(() => {
        expect(data).toEqual({})
        done()
      })
    })
  })
})

尝试方法

  • 在用例里临时用toEqual([])让测试用例执行通过
  • 尝试过在用例里通过wrapper.vm.fetchAppList(wrapper.vm),直接调用接口方法并把vue实例传进去,然后在接口方法里接收,无效
  • 在网上查阅资料都是直接解决异步的自动化测试问题,没有提及执行异步的测试用例this指向的问题
  • 哪位大神路过帮忙分析一下啊,看怎么样解决?我目前分析的结论就是node环境和浏览器环境this的指向会有区别,但找不到解决办法。亟待解决!

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

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

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文