vue-testing-best-practices
Naucz się testować komponenty Vue.js bez pułapek – od jednostkowych testów po E2E
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Umiejętność zbierająca sprawdzone praktyki testowania Vue.js. Dowiesz się, jak poprawnie konfigurować Vitest i Vue Test Utils, testować komponenty bez łamania testów przy refaktoringu, obsługiwać asynchroniczne operacje, testować composables z lifecycle hooks, integrować Pinię, obsługiwać komponenty Suspense i Teleport, oraz wybierać narzędzia E2E takie jak Playwright. Rozwiązuje typowe problemy: race conditions, błędy injekcji, snapshot testy, które fałszywie przechodzą.
Jak używać
Zainstaluj umiejętność w swoim projekcie Vue 3, aby uzyskać dostęp do referencji testowania. Umiejętność zawiera dokumentację dla Vitest (zalecanego test runnera) i Vue Test Utils.
Przejrzyj sekcję referencji, aby znaleźć rozwiązanie dla swojego problemu. Jeśli testy łamią się przy refaktoringu komponentów, zobacz dokument o podejściu blackbox. Jeśli masz problemy z race conditions, sprawdź wskazówki dotyczące async/await i flushPromises.
Dla testowania composables używających lifecycle hooks lub inject, skorzystaj z helper wrapper. Jeśli pracujesz z Pinią, zapoznaj się z konfiguracją store w testach, aby uniknąć błędów "injection Symbol(pinia) not found".
Obsługuj komponenty asynchroniczne i Suspense, konfigurując je prawidłowo w testach. Jeśli używasz Teleport, pamiętaj o złożoności queryowania treści teleportowanej.
Unikaj snapshot testów jako jedynego sposobu weryfikacji – mogą one przechodzić mimo złamanej funkcjonalności. Zamiast tego pisz testy behawioralne.
Do testów end-to-end wybierz Playwright na podstawie rekomendacji zawartych w umiejętności. Jeśli testy muszą weryfikować style obliczane lub rzeczywiste zdarzenia DOM, rozważ uruchomienie testów w przeglądarce zamiast w Node.js.