问题背景

项目是用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的指向会有区别，但找不到解决办法。亟待解决！