npm install --save-dev @vue/test-utils jest jest-environment-jsdom vue-jest

<!-- Counter.vue -->
<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="increment">Increase</button>
    <button @click="decrement">Decrease</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    },
  },
};
</script>

import { mount } from '@vue/test-utils';
import Counter from '@/components/Counter.vue';

describe('Counter.vue', () => {
  it('renders the count', () => {
    const wrapper = mount(Counter);
    expect(wrapper.find('h1').text()).toBe('0');
  });

  it('increments the count when button is clicked', async () => {
    const wrapper = mount(Counter);
    await wrapper.find('button').trigger('click');
    expect(wrapper.find('h1').text()).toBe('1');
  });

  it('decrements the count when button is clicked', async () => {
    const wrapper = mount(Counter);
    await wrapper.findAll('button')[1].trigger('click');
    expect(wrapper.find('h1').text()).toBe('-1');
  });
});

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: About,
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

<!-- Home.vue -->
<template>
  <div>
    <h1>Home Page</h1>
    <router-link to="/about">Go to About</router-link>
  </div>
</template>

<!-- About.vue -->
<template>
  <div>
    <h1>About Page</h1>
    <router-link to="/">Go to Home</router-link>
  </div>
</template>

import { createRouter, createWebHistory } from 'vue-router';
import { createApp } from 'vue';
import { createTestingPinia } from '@pinia/testing';
import Home from '@/views/Home.vue';
import About from '@/views/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

const app = createApp({});
app.use(router);

describe('Router', () => {
  it('navigates to the about page', async () => {
    const wrapper = mount(Home);
    await wrapper.find('a').trigger('click');
    expect(wrapper.vm.$route.path).toBe('/about');
  });
});