Тестирование компонентов Vue с использованием Jest и vue-utils - PullRequest
Новая
       9

Тестирование компонентов Vue с использованием Jest и vue-utils

0 голосов
/ 16 ноября 2018

Я пытаюсь протестировать компонент, вызванный в vue, используя jest и vue-utils, но выдает ошибку ниже 

expect(jest.fn()).toHaveBeenCalled()

 Expected mock function to have been called, but it was not called.

RandomPhoneNumber component Компонент использует пользовательский интерфейс ant-design-vue

       <div>
          <a-button
            type="primary"
            @click="generatePhone"
            size="large"
            class="btn-generate"
          >Generate Phone Numbers</a-button>
        </div>

То, что я сделал, ниже 

it('should call generatePhone', () => {
    const wrapper = mount(RandomPhoneNumber, {
      localVue,
      sync: false
    })

    const spy = jest.fn()
    wrapper.vm.generatePhone = spy
    const button = wrapper.find('.btn-generate')
    button.trigger('click')
    expect(wrapper.vm.generatePhone).toHaveBeenCalled()
  })

Кто-нибудь может рассказать об этом подробнее и что я здесь не так делаю.

Ответы [ 2 ]

0 голосов
/ 21 ноября 2018

Итак, после серии отладок и попыток увидеть, что работает.Похоже, что звонок wrapper.vm.method не обновляется.Я назвал generatePhone() без префикса wrapper.vm.Я не знаю, почему префикс с wrapper.vm отказался работать, хотя.Если кто-то знает, почему я думаю, что это будет очень полезно.

Как я решил это 

cost generatePhone = jest.fn();
const wrapper = mount(RandomPhoneNumber, {
  localVue,
  sync: false
})

generatePhone()
const button = wrapper.find('.btn-generate')
button.trigger('click')
expect(generatePhone).toHaveBeenCalled()

, если вы хотите передать параметр в generatePhone, вы можете передать его следующим образом:

generatePhone(params)
const button = wrapper.find('.btn-generate')
button.trigger('click')
expect(generatePhone).toBeCalledWith(params)
0 голосов
/ 16 ноября 2018

Ну, это трудно определить без кода вашего компонента. Ваш тестовый код выглядит вполне нормально, однако я никогда не использовал опцию sync: true.

У меня есть два предположения:

  1. Вы должны предоставить функцию макета через methods,

как: 

cost generatePhone = jest.fn();
const wrapper = mount(RandomPhoneNumber, {
  localVue,
  sync: false,
  methods: {
    generatePhone,
  }
})

const spy = jest.fn()
wrapper.vm.generatePhone = spy
const button = wrapper.find('.btn-generate')
button.trigger('click')
expect(generatePhone).toHaveBeenCalled()

Обратите внимание, что я ожидаю против generatePhone, не имея доступа к нему через wrapper.vm. Я не знаю, почему это происходит, но у меня были проблемы с использованием шутки при доступе через оболочку,

  1. Кроме того, вам может потребоваться дождаться вызова,

как: 

const generatePhone = jest.fn();
const wrapper = mount(RandomPhoneNumber, {
  localVue,
  sync: false,
  methods: {
    generatePhone,
  }
})

const spy = jest.fn()
wrapper.vm.generatePhone = spy
const button = wrapper.find('.btn-generate')
button.trigger('click')
await Promise.resolve()
expect(generatePhone).toHaveBeenCalled()
done() // this have to be passed as the 'it' function handler as a parameter: https://jestjs.io/docs/en/asynchronous.html

Я не совсем уверен насчет второго, но так как вы передаете sync как ложь, вам, возможно, придется подождать следующего тика для вызова метода, я не знаю, так как это зависит от внутренних органов Vue.

...