如何在组件中导入的工具上测试观察者？

Question

我在一个组件中使用类的实例作为工具。该组件监视类实例中的更改。但是，我没有为该观察者编写测试。

我尝试使用jest.fn，spyOn和setData，但是这些都不起作用。

该类如下：

export default class myTool {
    constructor () {
        this._myData = null
    }

    get myData () {
        return this._myData
    }

    set myData (updatedMyData) {
        this._myData = updatedMyData
    }
}

以及组件：

import myTool from '@/utils/myTool'
export default {
    ...
    data() {
        return {
            myTool: null
        }
    },
    methods: {
        handleMyDataUpdate(updatedMyData) {
            // do something
        }
    },
    mounted() {
        this.$watch('myTool.myData', (updatedMyData) => {
            this.handleMyDataUpdate(updatedMyData)
        })
        this.myTool = new myTool()
    }
    ...
}

第一次尝试使用jest.fn：

测试：

it('should call handleMyDataUpdate on myData update.', () => {
    const wrapper = mountComponent()
    const handleMyDataUpdate = jest.fn()
    wrapper.setMethods({ handleMyDataUpdate })
    wrapper.vm.myTool.myData = 5
    expect(handleMyDataUpdate).toBeCalled()
})

第二次尝试spyOn：

测试：

it('should call handleMyDataUpdate on myData update.', () => {
    const wrapper = mountComponent()
    const spy = jest.spyOn(wrapper.vm, 'handleMyDataUpdate')
    wrapper.vm.myTool.myData = 5
    expect(spy).toBeCalled();
}

第三次尝试setData：

测试：

it('should call handleMyDataUpdate on myData update.', () => {
    const wrapper = mountComponent()
    const handleMyDataUpdate = jest.fn()
    wrapper.setMethods({ handleMyDataUpdate })
    wrapper.setData({
        myTool: {
            myData: 5
        }
    })
    expect(handleMyDataUpdate).toBeCalled()
}

---

结果：我尝试的3件事始终失败，原因如下：Expected mock function to have been called.，是否评论myData更新的行。

我尝试过的其他事情：

我尝试将expect行包装在$nextTick内，但是它也不起作用：

wrapper.vm.$nextTick(() => {
    // expectation
    done()
})

以下错误输出，并且测试始终被视为“通过”，而测试应为“失败”：

console.error node_modules/vue/dist/vue.runtime.common.js:1739
{ Error: expect(jest.fn()).toBeCalled()

查看vue.runtime.common.js的1739行没有帮助。

那我该如何测试我的观察者？

Answer 1

问题是您在_myData类中的myTool最初是undefined，所以它没有反应。要解决此问题，请在_myData的构造函数中初始化myTool：

class myTool {
  constructor() {
    this._myData = null
  }
  // ...
}

然后，您的“第一次尝试”测试应成功通过。

demo