testing-route.spec.ts

import { screen } from "@testing-library/vue";
import { createTestComponentRenderer } from "~~core/test";
import { mockNuxtImport } from "@nuxt/test-utils/runtime";
import { routerKey, createRouter, createWebHistory } from '#vue-router';
import { XButton } from "~~base-ui";

let router: ReturnType<typeof createRouter>;

beforeEach(async () => {
  router = createRouter({
  history: createWebHistory(),
  routes: [{
    path: '/',
    component: {
      template: 'Welcome tcreateRoutero the blogging app'
    }
  }],
});

  router.push('/')
  await router.isReady()
});

const Comp = defineComponent({
  'template': "<XButton data-testid=\"clickMe\" :to=\"{path: '/'}\">Click</XButton>",
})

const renderComp = createTestComponentRenderer(Comp, {}, {
  global: {
    stubs: {
      XButton: XButton,
      NuxtLink: {
        template: '<a data-testid="clickMe" @click="$emit(\'click\')">Click me</a>'
      },
      // RouterLink: RouterLinkStub,
    },
    provide: {
      plugins: [router],
      [routerKey]: () => ({ push() { console.log('push router aqui') }})
    }, // Supress warnings
  }
});

mockNuxtImport('useRouter', () => vi.fn(() => ({ push() { console.log('push router aqui') }})));

describe('VueTest',() => {
  it('should stub nuxtLink', async () => {
    const { user } = renderComp();

    const push = vi.spyOn(router, 'push');
    const replace = vi.spyOn(router, 'replace');

    const button = screen.getByTestId('clickMe');
    await user.click(screen.getByTestId('clickMe'));
    await user.click(screen.getByTestId('clickMe'));
    await user.click(screen.getByTestId('clickMe'));

    // screen.debug(button);

    expect(push).toHaveBeenCalledTimes(3);
    // expect(replace).toHaveBeenCalledTimes(3);
  });
});