A Guide/Help to use with Vitest and Composition API

[joseluisgs]

Hi I would like to use with Vitest and Composition API Bu I can't get to use it
I follow tyhe steps to use ina local test

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>

this is my test

import { createRouterMock, injectRouterMock } from 'vue-router-mock'

test('should be go to a daybook-no-entry', async () => {
  const router = createRouterMock()
    injectRouterMock(router)

    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(wrapper.router.push).toHaveBeenCalledTimes(1)
 
  })

I have this problem

FAIL  tests/unit/views/HomeViewTest.spec.js > View -> HomeView > Hacer click en el botón debe redireccionar a daybook-no-entry
Error: No Spy Available
 ❯ createSpy node_modules/vue-router-mock/dist/index.mjs:40:9
 ❯ Module.createRouterMock node_modules/vue-router-mock/dist/index.mjs:70:45
 ❯ tests/unit/views/HomeViewTest.spec.js:15:19
     13| 
     14|   test('Hacer click en el botón debe redireccionar a daybook-no-entry', async () => {
     15|     const router = createRouterMock()
       |                   ^
     16|     injectRouterMock(router)
     17| 

Could you help me or give me a guide??
thanks @posva for this library!

[posva]

See https://github.com/posva/vue-router-mock#testing-libraries

[joseluisgs]

Hi Eduardo @posva. Thank you very much
So, I have this problem

test('Hacer click en el botón debe redireccionar a daybook-no-entry', async () => {
    const router = createRouterMock({
      spy: {
        create: (fn) => vi.fn(fn),
        reset: (spy) => spy.mockReset(),
      },
    })
    injectRouterMock(router)

    const wrapper = mount(HomeView)

    expect(wrapper.router).toBe(router)

    // Trabajamos con el boton
    const dayButton = wrapper.find('[data-testid="DayButton"]')
    expect(dayButton.exists()).toBe(true)

    expect(dayButton.text()).toBe('DayBook')
    await dayButton.trigger('click')

    expect(wrapper.router.push).toHaveBeenCalled()
  })

I fails agais in expect(wrapper.router).toBe(router)

I I remove it, I have
``bash
FAIL tests/unit/views/HomeViewTest.spec.js > View -> HomeView > Hacer click en el botón debe redireccionar a daybook-no-entry
TypeError: Cannot read properties of undefined (reading 'push')
❯ tests/unit/views/HomeViewTest.spec.js:34:27
32| await dayButton.trigger('click')
33|
34| expect(wrapper.router.push).toHaveBeenCalled()
| ^
35| })
36| })

Thank you for the help!

[joseluisgs]

I thik I solve with this code, Is it correct?

const router = createRouterMock({
    spy: {
      create: (fn) => vi.fn(fn),
      reset: (spy) => spy.mockReset(),
    },
  })

  beforeEach(() => {
    // inject it globally to ensure `useRoute()`, `$route`, etc work
    // properly and give you access to test specific functions
    injectRouterMock(router)
  })

test('Hacer click en el botón debe redireccionar a daybook-no-entry', async () => {
    const wrapper = mount(HomeView)
    // Obtenemos el router
    const router = getRouter()
    // Trabajamos con el boton
    const dayButton = wrapper.find('[data-testid="DayButton"]')
    expect(dayButton.exists()).toBe(true)

    expect(dayButton.text()).toBe('DayBook')
    await dayButton.trigger('click')

    expect(router.push).toHaveBeenCalledWith({ name: 'daybook-no-entry' })
  })

[posva]

yes, as in the docs 🙂

[joseluisgs]

so, why is null, if I user in the other way?

[joseluisgs]

Maybe It would be a problem with globals