npm install @vue/test-utils --save-dev
npm install jest @vue/vue3-jest --save-dev

module.exports = {
  preset: '@vue/cli-plugin-unit-jest/presets/default',
  testEnvironment: 'jsdom'
};

{
  "scripts": {
    "test:unit": "jest"
  }
}

// Counter.vue
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

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

describe('Counter.vue', () => {
  it('renders the initial count', () => {
    const wrapper = mount(Counter);
    expect(wrapper.text()).toContain('Count: 0');
  });

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

npm run test:unit

// Greeting.vue
<template>
  <h1>Hello, {{ name }}!</h1>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      required: true
    }
  }
};
</script>

// tests/unit/Greeting.spec.js
import { mount } from '@vue/test-utils';
import Greeting from '@/components/Greeting.vue';

describe('Greeting.vue', () => {
  it('renders the correct name from props', () => {
    const wrapper = mount(Greeting, {
      props: { name: 'Vue.js' }
    });
    expect(wrapper.text()).toBe('Hello, Vue.js!');
  });
});

// Button.vue
<template>
  <button @click="$emit('custom-event')">Click Me</button>
</template>

<script>
export default {
  name: 'Button'
};
</script>

// tests/unit/Button.spec.js
import { mount } from '@vue/test-utils';
import Button from '@/components/Button.vue';

describe('Button.vue', () => {
  it('emits a custom event when clicked', async () => {
    const wrapper = mount(Button);
    await wrapper.trigger('click');
    expect(wrapper.emitted()).toHaveProperty('custom-event');
  });
});

// store/index.js
import { createStore } from 'vuex';

const store = createStore({
  state() {
    return {
      count: 0
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

export default store;

// tests/unit/store.spec.js
import { createStore } from 'vuex';

describe('Vuex Store', () => {
  it('increments the count', () => {
    const store = createStore({
      state() {
        return { count: 0 };
      },
      mutations: {
        increment(state) {
          state.count++;
        }
      }
    });

    store.commit('increment');
    expect(store.state.count).toBe(1);
  });
});

// tests/unit/CounterWithStore.spec.js
import { mount } from '@vue/test-utils';
import { createStore } from 'vuex';
import Counter from '@/components/Counter.vue';

describe('Counter.vue with Vuex', () => {
  it('increments the count using Vuex', async () => {
    const store = createStore({
      state() {
        return { count: 0 };
      },
      mutations: {
        increment(state) {
          state.count++;
        }
      }
    });

    const wrapper = mount(Counter, {
      global: {
        plugins: [store]
      }
    });

    const button = wrapper.find('button');
    await button.trigger('click');
    expect(wrapper.text()).toContain('Count: 1');
  });
});