Vue 51: Pruebas de Componentes
easy⏱ 5 mincoursevue
Cómo se ve una prueba real
Una prueba típica de componente en Vue (Vitest + @testing-library/vue, o @vue/test-utils) monta el componente en un DOM headless, interactúa con él como lo haría una persona usuaria, y verifica el resultado. Se ejecuta en Node mediante un test runner - no en este sandbox del navegador - pero el modelo mental aplica igual.
// TodoItem.spec.js
import { render, fireEvent, screen } from '@testing-library/vue';
import TodoItem from './TodoItem.vue';
test('toggles done state on click', async () => {
render(TodoItem, { props: { label: 'Learn Vue testing' } });
const button = screen.getByRole('button');
expect(button).toHaveTextContent('[ ]');
await fireEvent.click(button);
expect(button).toHaveTextContent('[x]');
});
Sin test runner aquí - uno hecho a mano en su lugar
No hay ningún proceso de Vitest disponible en un sandbox de navegador sin instalación. Abajo, un componente real de Vue se monta en vivo, y un panel de 'test runner' hecho a mano lo maneja exactamente como lo haría una prueba real - clic, luego verificación - registrando PASS/FAIL tal como lo haría un reporte de pruebas real.
Prueba comportamiento, no implementación
Fíjate en que las aserciones leen el texto que el usuario vería ('[ ]' / '[x]') y no el estado interno del componente (vm.done). Los internals pueden cambiar en un refactor; el comportamiento visible para quien usa la app no debería - por eso las pruebas se escriben así.