Un post rapido riguardo un problema che mi ritrovo ad affrontare frequentemente: come testare se un elemento esiste o meno in un componente. Tralascio la parte relativa alla configurazione di Jest con SvelteKit, ne ho parlato estesamente poco tempo fa. Mi concentro solamente su questo aspetto.
Ho 3 diverse cose da testare:
- se un elemento esiste all’interno di una componente Svelte
- se l’elemento esiste e contiene un dato testo
- se l’elemento non esiste proprio nella pagina
Uso come esempio i test che sto implementando per il mio componente svelte-component-info
Controllare che un elemento esista in un componente Svelte
La prima è facile. Dopo aver creato il componente uso Jest per individuare l’elemento in questione. In questo caso cerco un elemento con tag H1:
expect(svelteInfo.queryByRole("heading")).toBeTruthy();
In questo modo Jest controlla se il componente Svelte contiene un elemento con ARIA Role heading. Se non lo trova il test non viene superato.
Controllare che un elemento abbia un testo specifico
Se invece voglio controllare che un elemento abbia una proprietà specifica uso un codice leggermente diverso. Per prima cosa catturo l’elemento
const title = svelteInfo.getByRole("heading");
Poi controllo quello che mi interessa. In questo caso verifico il testo che contiene:
expect(title).toHaveTextContent("Hello");
Oltre al testo posso controllare molte altre cose, ma per questo è meglio consultare il repository testing-library/jest-dom.
Controllare che un elemento non esista in Svelte
Infine la cosa meno intuitiva: come controllare che un elemento NON sia presente in una pagina WEB o in un elemento Svelte. In questo caso uso un codice simile al primo ma invece di usare expect(..).toBeTruthy() uso expect(...).toBeNull():
expect(svelteInfo.queryByTestId("description")).toBeNull();
Bene, questo è quanto. Un appunto veloce per ricordare al me futuro come testare l’esistenza o meno di un elemento.
