Mock vue router userRouter with Vitest and Typescript

vitest-typescript-useRouter.ts

import { shallowMount } from '@vue/test-utils'
import { beforeEach, describe, test, vi, expect } from 'vitest'
import { useRouter } from 'vue-router'
import { RouteNames, router } from '../../router/router'
import Home from './Home.vue'

vi.mock('vue-router')

describe('Home', () => {
  vi.mocked(useRouter).mockReturnValue({
    ...router,
    push: vi.fn()
  })

  beforeEach(() => {
    vi.mocked(useRouter().push).mockReset()
  })

  test(`navigates to ${RouteNames.GREETING} route and sets query parameter name equal to 'John Doe'`, async () => {
    const wrapper = shallowMount(Home)

    await wrapper.find('button').trigger('click')

    expect(useRouter().push).toHaveBeenCalledWith({
      name: RouteNames.GREETING,
      query: {
        name: 'John Doe',
      },
    })
  })
})