Как мне проверить наблюдателя на инструменте, который был импортирован в мой компонент? - PullRequest
Новая
       7

Как мне проверить наблюдателя на инструменте, который был импортирован в мой компонент?

0 голосов
/ 24 декабря 2018

Я использую экземпляр класса в качестве инструмента в одном из моих компонентов.Этот компонент отслеживает изменения в экземпляре класса.Однако мне не удается написать тест для этого наблюдателя.

Я пытался использовать 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()
    }
    ...
}

1-я попытка с 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()
})

2-я попытка с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();
}

3-я попытка с 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()

Просмотр строки 1739 из vue.runtime.common.js не помог.

Итак, как мне проверить мой наблюдатель?

1 Ответ

0 голосов
/ 25 декабря 2018

Проблема в том, что ваш _myData в классе myTool изначально undefined, поэтому он не реагирует.Чтобы решить эту проблему, инициализируйте _myData в конструкторе myTool: 

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

Затем ваш тест «1-я попытка» должен пройти успешно.

demo

...