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

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

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

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

那么，您的“第一次尝试”测试应该会成功通过。

demo