Установленный на макете крюк

Question

Я делаю некоторые юнит-тесты для компонентов.Однако в некоторых компонентах у меня что-то работает на хуке mounted, что делает мой тест неудачным.Мне удалось издеваться над методами, которые мне не нужны.Однако мне было интересно, есть ли обходной путь, насмехающийся над самим крючком mounted.

@/components/attendeesList.vue

<template>
  <div>
    <span> This is a test </span> 
  </div>
</template>

JS

<script>
methods: {
    testMethod: function() {
        // Whatever is in here I have managed to mock it
    }
},

mounted: {
    this.testMethod();
}
</script>

Test.spec.js

import { mount, shallowMount } from '@vue/test-utils'
import test from '@/components/attendeesList.vue'

describe('mocks a method', () => {    
  test('is a Vue instance', () => {
  const wrapper = shallowMount(attendeesList, {
    testMethod:jest.fn(),
  })
  expect(wrapper.isVueInstance()).toBeTruthy()
})

Answer 1

В настоящее время vue-test-utils не поддерживает ложные перехватчики жизненного цикла, но вы можете смоделировать метод, вызванный из перехватчика mounted. В вашем случае, чтобы смоделировать testMethod(), объявите метод в опциях монтирования (обязательно используйте свойство methods):

const testMethod = jest.fn()
const wrapper = shallowMount(HelloWorld, {
  methods: {
    testMethod
  }
})
expect(testMethod).toHaveBeenCalledWith("hello")

Answer 2

Утилиты тестирования Vue имеют встроенный способ имитации методов -

const wrapper = shallowMount(attendeesList,{
   testMethod:jest.fn()
})

Самый простой способ решить вашу проблему - переместить код в смонтированном хуке в метод, заглушить его с помощью приведенного выше кода и вызвать его из своего хука.