Wprowadzenie do frameworków testowych
Przegląd narzędzi i środowiska testowania aplikacji Vue.
Wprowadzenie do frameworków testowych to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 1 z 3. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 3 lekcji w sumie.
Po co testować
Testy automatyczne wykrywają błędy, zanim zrobią to użytkownicy, dokumentują oczekiwane działanie kodu i pozwalają bez obaw przeprowadzać refaktoryzację. Wraz z rozwojem aplikacji testy stają się niezbędne do utrzymania jakości bez ręcznego sprawdzania wszystkiego.
Trzy rodzaje testów
Istnieją trzy główne poziomy testów: testy jednostkowe sprawdzają małe fragmenty w izolacji, testy integracyjne sprawdzają współpracę poszczególnych elementów, a testy end-to-end (e2e) obsługują całą aplikację tak jak prawdziwy użytkownik.
Testy jednostkowe
Test jednostkowy weryfikuje pojedynczą funkcję lub komponent w izolacji, z zamockowanymi zależnościami. Testy te są szybkie i precyzyjnie wskazują, co uległo awarii. Większość testów powinna być jednostkowa.
function add(a, b) {
return a + b
}
test("add sums two numbers", () => {
expect(add(2, 3)).toBe(5)
})Testy integracyjne
Testy integracyjne sprawdzają, czy kilka jednostek prawidłowo współpracuje, na przykład komponent i jego store albo formularz wywołujący wrapper API. Wykrywają problemy z połączeniami, których same testy jednostkowe nie zauważą.
Testy end-to-end
Testy e2e uruchamiają prawdziwą przeglądarkę i przechodzą przez aplikację dokładnie tak, jak zrobiłby to użytkownik. Są najbardziej realistyczne, ale także najwolniejsze i najbardziej podatne na niestabilność, dlatego należy pisać ich mniej.
Piramida testów
Piramida testów zakłada wiele szybkich testów jednostkowych u podstawy, mniej testów integracyjnych pośrodku oraz niewielką liczbę testów e2e na szczycie. Zapewnia to równowagę między zaufaniem do kodu a szybkością.
Vitest
Vitest to szybki, nowoczesny runner testów przeznaczony do projektów opartych na Vite. Udostępnia API zgodne z Jest i bezproblemowo współpracuje z aplikacjami Vue 3 utworzonymi za pomocą Vite.
npm install -D vitestJest
Jest to od dawna używany runner testów, popularny w ekosystemie JavaScript. Vitest odwzorowuje jego API (describe, test, expect), więc wiedzę można łatwo przenosić między tymi narzędziami.
describe("math", () => {
test("adds", () => {
expect(1 + 1).toBe(2)
})
})Vue Test Utils
Vue Test Utils to oficjalna biblioteka do testowania jednostkowego komponentów Vue. Montuje komponent w środowisku testowym, dzięki czemu można wchodzić z nim w interakcje i weryfikować jego wynik.
npm install -D @vue/test-utilsCypress i Playwright
Do testów e2e popularnymi wyborami są Cypress i Playwright. Automatyzują one prawdziwą przeglądarkę, pozwalając skryptowo wykonywać kliknięcia, wpisywać tekst i nawigować, a następnie weryfikować to, co widzi użytkownik.
Wybór stosu
Typowy stos Vue 3 wykorzystuje Vitest wraz z Vue Test Utils do testów jednostkowych i komponentów oraz Cypress lub Playwright do testów e2e. Takie połączenie obejmuje całą piramidę dzięki nowoczesnym i dobrze wspieranym narzędziom.
Szybki sprawdzian
Proszę sprawdzić swoją wiedzę na temat frameworków testowych.
Podsumowanie
Testy mają trzy poziomy: jednostkowy, integracyjny i e2e, uporządkowane zgodnie z piramidą testów (wiele testów jednostkowych i niewiele e2e). Nowoczesny stos Vue wykorzystuje Vitest lub Jest wraz z Vue Test Utils do testów jednostkowych oraz Cypress lub Playwright do testów e2e. W następnej części napiszą Państwo rzeczywiste testy jednostkowe za pomocą Vue Test Utils.
Często zadawane pytania
Czy lekcja „Wprowadzenie do frameworków testowych” jest bezpłatna?
Tak — pełny tekst „Wprowadzenie do frameworków testowych” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 3 lekcji w sumie.
Co nauczysz się w „Wprowadzenie do frameworków testowych”?
Przegląd narzędzi i środowiska testowania aplikacji Vue. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Vue Academy?
Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 3.
Ile czasu zajmuje lekcja „Wprowadzenie do frameworków testowych”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?
Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Wprowadzenie do frameworków testowych
- Testy jednostkowe z Vue Test Utils
- Testy end-to-end