javascript - VueJS / Jest - 测试是否从组件的方法调用导入的函数

Question

我有一个看起来像这样的 VueJS 2 组件：

<template>
  <div>
    <button @click="onFavorite">
      Add to favorites
    </button>
  </div>
</template>

<script>
import { trackFavorite } from "@/utils/analytics";

export default {
  name: "FavoriteButton",
  methods: {
    onFavorite() {
      trackFavorite("click", "favorite");
      [ ... ]
    }
  }
}
</script>

我想编写一个 Jest 测试来检查是否调用了onFavoriterun 。trackFavorite尝试过这样的事情：

import { shallowMount } from '@vue/test-utils';
import FavoriteButton from '../FavoriteButton'

describe("FavoriteButton", () => {
  let wrapper

  beforeEach(() => {
    wrapper = shallowMount(FavoriteButton)
  })

  describe('.onFavorite', () => {
    beforeEach(() => {
      wrapper.vm.trackFavorite = jest.fn()
      wrapper.vm.onFavorite()
    })

    it('calls trackFavorite', () => {
      expect(wrapper.vm.trackFavorite).toHaveBeenCalled()
    })
  })
})

但它不起作用，因为trackFavorite它没有被 Jest 模拟函数取代。

标签： javascriptvue.jsvuejs2jestjs

Answer 1

1. 在测试文件的顶部使用jest.mock()来模拟整个导入（包括它的方法）。
2. require()测试中的文件以访问模拟。
3. 使用模拟引用，验证模拟的trackFavorite方法是否被调用。

// FavoriteButton.spec.js
import { shallowMount } from '@vue/test-utils'
import FavoriteButton from '@/components/FavoriteButton.vue'

jest.mock('@/utils/analytics') 1️⃣

describe('FavoriteButton.vue', () => {
  it('calls trackFavorite on button click', async () => {
    const analytics = require('@/utils/analytics') 2️⃣
    const wrapper = shallowMount(FavoriteButton)
    await wrapper.find('button').trigger('click')
    expect(analytics.trackFavorite).toHaveBeenCalled() 3️⃣
  })
})

演示