Tridentsof Antigravity Dev Kit Vitest Testing

name: vitest-testing description: Vitest testing for Vue3 applications

Vitest Testing

Unit and component testing for Vue3.

Basic Test

import { describe, it, expect } from 'vitest'

describe('Calculator', () => {
  it('adds two numbers', () => {
    expect(2 + 3).toBe(5)
  })
})

Component Test

import { mount } from '@vue/test-utils'
import { describe, it, expect } from 'vitest'
import MyButton from './MyButton.vue'

describe('MyButton', () => {
  it('renders label', () => {
    const wrapper = mount(MyButton, {
      props: { label: 'Click me' }
    })
    expect(wrapper.text()).toContain('Click me')
  })
  
  it('emits click event', async () => {
    const wrapper = mount(MyButton)
    await wrapper.find('button').trigger('click')
    expect(wrapper.emitted('click')).toBeTruthy()
  })
})

Testing Composables

import { describe, it, expect } from 'vitest'
import { useCounter } from './useCounter'

describe('useCounter', () => {
  it('increments count', () => {
    const { count, increment } = useCounter()
    
    expect(count.value).toBe(0)
    increment()
    expect(count.value).toBe(1)
  })
})

Mocking

import { vi, describe, it, expect } from 'vitest'
import { fetchUsers } from './api'

vi.mock('./api', () => ({
  fetchUsers: vi.fn().mockResolvedValue([{ id: 1 }])
}))

describe('UserList', () => {
  it('fetches users', async () => {
    const users = await fetchUsers()
    expect(users).toHaveLength(1)
  })
})

Pinia Store Testing

import { setActivePinia, createPinia } from 'pinia'
import { useUserStore } from './userStore'

describe('User Store', () => {
  beforeEach(() => {
    setActivePinia(createPinia())
  })
  
  it('has initial state', () => {
    const store = useUserStore()
    expect(store.user).toBeNull()
  })
})

Run Tests

npm run test
npm run test -- --watch
npm run test -- --coverage

Converted and distributed by TomeVault — claim your Tome and manage your conversions.