Svelte 51: Probar Componentes
easy⏱ 5 mincoursesvelte
Qué verifica una prueba real de componente
Las pruebas renderizan el componente, simulan una interacción real de usuario y luego afirman que el DOM o estado resultante coincide con lo esperado — nunca más hace falta hacer clic manualmente una vez que la prueba existe.
// LikeButton.spec.js
import { render, fireEvent, screen } from '@testing-library/svelte';
import LikeButton from './LikeButton.svelte';
test('toggles liked state and increments count', async () => {
render(LikeButton, { props: { initialLikes: 4 } });
const btn = screen.getByRole('button');
await fireEvent.click(btn);
expect(screen.getByText('5 likes')).toBeTruthy();
expect(btn.getAttribute('aria-pressed')).toBe('true');
});
Lee el runner simulado
En defaultCode, runTests() hace clic programáticamente en el botón de like real dos veces y verifica dos afirmaciones después: el contador volvió a su valor inicial, y aria-pressed refleja el estado de 'me gusta'. Intenta hacer clic tú mismo primero en el corazón, luego presiona 'Run tests' — observa cómo las afirmaciones se siguen cumpliendo sin importar el estado inicial, porque la prueba calcula diferencias.
Prueba comportamiento, no implementación
Observa que la especificación real de arriba consulta por rol y texto visible — no por nombres de variables internas. Eso es deliberado: las pruebas que solo se preocupan por lo que VE la persona usuaria siguen pasando incluso después de refactorizar el interior del componente.