模拟安装的挂钩笑话测试单元

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()
})

解决问题的最简单方法是将已挂接的钩子中的代码移动到一个方法中，对上面的代码进行存根，然后从钩子中调用它。