Skip to content
← Todas las preguntas
Intermedio

¿Cómo se testean componentes Vue con Vitest?

Testing
ts
import { describe, it, expect, vi } from 'vitest'
import { mount } from '@vue/test-utils'
import TodoList from '../TodoList.vue'

describe('TodoList', () => {
  it('renders empty state', () => {
    const wrapper = mount(TodoList)
    expect(wrapper.findAll('li')).toHaveLength(0)
    expect(wrapper.text()).toContain('No tasks')
  })

  it('adds a todo', async () => {
    const wrapper = mount(TodoList)
    await wrapper.find('input').setValue('New todo')
    await wrapper.find('button').trigger('click')
    expect(wrapper.findAll('li')).toHaveLength(1)
    expect(wrapper.text()).toContain('New todo')
  })

  it('emits event on completion', async () => {
    const wrapper = mount(TodoList, {
      props: { items: [{ id: 1, text: 'Test', done: false }] }
    })
    await wrapper.find('input[type="checkbox"]').setValue(true)
    expect(wrapper.emitted('complete')).toBeTruthy()
    expect(wrapper.emitted('complete')![0]).toEqual([1])
  })
})

Testear composables:

ts
import { useCounter } from '../useCounter'

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

Publicado bajo la licencia MIT.