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

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，因此它不是响应式(Reactive)的。要解决此问题，请在 myTool 的构造函数中初始化 _myData:

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

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

demo