Tengo un componente VueJS 2 que se parece a esto:
<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> Quiero escribir una prueba de Jest que verifique que cuando se ejecuta onFavorite se llama a trackFavorite . Intenté algo como esto:
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() }) }) }) Pero no funciona ya que trackFavorite no se reemplaza por la función simulada Jest.
jest.mock() en la parte superior del archivo de prueba para simular la importación completa (incluidos sus métodos).require() el archivo dentro de la prueba para acceder al simulacro.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️⃣ }) })