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