Test a Mock Router with composition API adn Vitest

[joseluisgs]

Hi
I woudl like to test a vue component with a router using vitest. I following this guide but I have problems
https://test-utils.vuejs.org/guide/advanced/vue-router.html#using-a-mocked-router-with-composition-api

This is my component

<button
      data-testid="DayButton"
      class="btn btn-primary"
      @click="goToDaybook()"
    >
      DayBook
    </button>

<script setup>
  import { useRouter } from 'vue-router'

  const router = useRouter()

  const goToDaybook = () => router.push({ name: 'daybook-no-entry' })
  const goToAbout = () => router.push({ name: 'about' })
</script>

Here it is my test

test('should be go to a daybook-no-entry', async () => {
    vi.mock('vue-router', () => ({
      useRoute: vi.fn(),
      useRouter: vi.fn(() => ({
        push: () => {},
      })),
    }))

    const push = vi.fn()
    useRouter.mockImplementationOnce(() => ({
      push,
    }))

    const wrapper = mount(HomeView)

    // Mock del metodo goToDayBook
    wrapper.vm.goToDaybook = vi.fn()

    // Trabajamos con el boton
    const dayButton = wrapper.find('[data-testid="DayButton"]')
    expect(dayButton.exists()).toBe(true)
    // texto de boton es daybook
    expect(dayButton.text()).toBe('DayBook')
    await dayButton.trigger('click')
    // Cone sto ya sabemos que lo ha llamado!!!
    expect(wrapper.vm.goToDaybook).toHaveBeenCalledTimes(1)
    // Router push ha sido llamado
    expect(push).toHaveBeenCalled()
  })

But I have the following error

 FAIL  tests/unit/views/HomeViewTest.spec.js > View -> HomeView > Hacer click en el botón debe redireccionar a daybook-no-entry
AssertionError: expected "spy" to be called at least once
 ❯ tests/unit/views/HomeViewTest.spec.js:41:18
     39|     expect(wrapper.vm.goToDaybook).toHaveBeenCalledTimes(1)
     40|     // Router push ha sido llamado
     41|     expect(push).toHaveBeenCalled()
       |                  ^
     42|   })
     43| })

Could you help me or gieve some guide?

Thank you

[freakzlike]

You overwrite your method with wrapper.vm.goToDaybook = vi.fn(). So it will no longer do it's normal logic (calling router.push). Remove the check of wrapper.vm.goToDaybook and try again

[joseluisgs]

Hi, thank you for the help. I have the same problem

test('Hacer click en el botón debe redireccionar a daybook-no-entry', async () => {
    vi.mock('vue-router', () => ({
      useRoute: vi.fn(),
      useRouter: vi.fn(() => ({
        push: () => {},
      })),
    }))

    const push = vi.fn()
    useRouter.mockImplementationOnce(() => ({
      push,
    }))


    const wrapper = mount(HomeView)

    // expect(wrapper.router).toBe(router)

    // Mock del metodo goToDayBook
    //wrapper.vm.goToDaybook = vi.fn()

    // Trabajamos con el boton
    const dayButton = wrapper.find('[data-testid="DayButton"]')
    expect(dayButton.exists()).toBe(true)
    // texto de boton es daybook
    expect(dayButton.text()).toBe('DayBook')
    await dayButton.trigger('click')
    // Cone sto ya sabemos que lo ha llamado!!!
    //expect(wrapper.vm.goToDaybook).toHaveBeenCalledTimes(1)
    // Router push ha sido llamado
    expect(push).toHaveBeenCalled()
  })

 FAIL  tests/unit/views/HomeViewTest.spec.js > View -> HomeView > Hacer click en el botón debe redireccionar a daybook-no-entry
AssertionError: expected "spy" to be called at least once
 ❯ tests/unit/views/HomeViewTest.spec.js:44:18
     42|     //expect(wrapper.vm.goToDaybook).toHaveBeenCalledTimes(1)
     43|     // Router push ha sido llamado
     44|     expect(push).toHaveBeenCalled()
       |                  ^
     45|   })
     46| })

[freakzlike]

Move the vi.mock to module top level and out of the test method

[joseluisgs]

Sorry but I have the same problem! :(

here is my code

import { describe, expect, test, vi } from 'vitest'

import HomeView from '@/views/HomeView.vue'
import { mount, shallowMount } from '@vue/test-utils'

import { useRouter } from 'vue-router'

vi.mock('vue-router', () => ({
  useRoute: vi.fn(),
  useRouter: vi.fn(() => ({
    push: () => {},
  })),
}))

describe('View -> HomeView', () => {
   test('should go to daybook-no-entry', async () => {
    const push = vi.fn()
    useRouter.mockImplementationOnce(() => ({
      push,
    }))

    const wrapper = mount(HomeView)

    // Trabajamos con el boton
    const dayButton = wrapper.find('[data-testid="DayButton"]')
    expect(dayButton.exists()).toBe(true)
    // texto de boton es daybook
    expect(dayButton.text()).toBe('DayBook')
    await dayButton.trigger('click')
    expect(push).toHaveBeenCalled()
  })
})

[freakzlike]

It seems like it is not mocking vue-router. But I am not quite sure why

[joseluisgs]

Yes, It is a littler confusing. I use this https://github.com/posva/vue-router-mock and works.
Also, I put globals to true en vite.config
Thank you very much!!!