Porównania z innymi narzędziami do uruchamiania testów

Jest

Jest zdominował rynek frameworków testowych, oferując domyślne wsparcie dla większości projektów JavaScript, przyjazne API (it i expect) oraz kompletny zestaw funkcji testowych, niezbędnych w większości konfiguracji (snapshoty, mocki, pokrycie kodu). Jesteśmy wdzięczni zespołowi i społeczności Jest za stworzenie intuicyjnego API do testowania oraz za popularyzację wielu wzorców testowania, które stały się standardem w ekosystemie webowym.

Możliwe jest użycie Jest w konfiguracjach Vite. @sodatea stworzył vite-jest, którego celem jest zapewnienie pierwszorzędnej integracji Vite z Jest. Ostatnie blokery w Jest zostały usunięte, co czyni go pełnoprawną opcją dla twoich testów jednostkowych.

Jednak w świecie, w którym Vite zapewnia wsparcie dla najczęściej używanych narzędzi webowych (TypeScript, JSX, najpopularniejsze frameworki UI), Jest stanowi źródło dodatkowej złożoności. Jeśli twoja aplikacja jest oparta na Vite, posiadanie dwóch różnych potoków do konfiguracji i utrzymania nie jest uzasadnione. Dzięki Vitest możesz zdefiniować konfigurację dla środowisk deweloperskich, budowania i testowania w ramach jednego potoku, współdzieląc te same wtyczki i ten sam plik vite.config.js.

Nawet jeśli twoja biblioteka nie używa Vite (na przykład, jeśli jest zbudowana za pomocą esbuild lub Rollup), Vitest jest interesującą opcją, ponieważ zapewnia szybsze wykonywanie testów jednostkowych i znaczną poprawę Developer Experience (DX) dzięki domyślnemu trybowi obserwacji wykorzystującemu natychmiastowe Hot Module Reload (HMR) Vite. Vitest oferuje kompatybilność z większością API Jest i bibliotek ekosystemu, więc w większości projektów powinien być bezproblemowym zamiennikiem Jest.

Cypress

Cypress to narzędzie do uruchamiania testów oparte na przeglądarce, stanowiące uzupełnienie dla Vitest. Jeśli chcesz używać Cypress, sugerujemy wykorzystanie Vitest do testowania całej logiki działającej poza przeglądarką w twojej aplikacji, a Cypress do testowania logiki opartej na przeglądarce.

Cypress to znane narzędzie do testowania end-to-end, ale jego nowy moduł testowania komponentów ma świetne wsparcie dla testowania komponentów Vite i jest idealnym wyborem do testowania wszystkiego, co renderuje się w przeglądarce.

Narzędzia do uruchamiania testów oparte na przeglądarce, takie jak Cypress, WebdriverIO i Web Test Runner, są w stanie wykryć problemy, których Vitest nie jest w stanie, ponieważ wykorzystują rzeczywistą przeglądarkę i jej API.

Mechanizm testowy Cypress koncentruje się na ustalaniu, czy elementy są widoczne, dostępne i interaktywne. Cypress został stworzony specjalnie do tworzenia i testowania interfejsów użytkownika, a jego DX koncentruje się na testowaniu komponentów wizualnych. Widzisz swój komponent renderowany wraz z raportem testowym. Po zakończeniu testu komponent pozostaje interaktywny i możesz debugować wszelkie występujące błędy za pomocą narzędzi deweloperskich przeglądarki.

W przeciwieństwie do tego, Vitest koncentruje się na zapewnieniu najlepszego możliwego DX dla niezwykle szybkich testów działających poza przeglądarką (headless). Narzędzia oparte na Node, takie jak Vitest, obsługują różne środowiska przeglądarki z częściową implementacją, np. jsdom, które zapewniają wystarczającą funkcjonalność do szybkiego przeprowadzania testów jednostkowych dowolnego kodu odwołującego się do API przeglądarki. Wadą jest to, że te środowiska przeglądarki mają ograniczenia w zakresie implementowanych funkcji. Na przykład, jsdom brakuje wielu funkcji, takich jak window.navigation lub silnik układu (offsetTop, itp.).

Wreszcie, w przeciwieństwie do Web Test Runner, narzędzie do uruchamiania testów Cypress przypomina bardziej IDE niż typowy runner, ponieważ w przeglądarce widzisz również rzeczywisty renderowany komponent, wraz z wynikami testów i logami.

Cypress również integruje Vite ze swoimi produktami: przebudowując interfejs użytkownika swojej aplikacji za pomocą Vitesse i wykorzystując Vite do wspierania rozwoju swoich projektów.

Uważamy, że Cypress nie jest dobrą opcją do testowania jednostkowego kodu działającego poza przeglądarką, ale połączenie Cypress (do testów E2E i komponentów) z Vitest (do testów jednostkowych) w pełni zaspokoiłoby potrzeby testowe twojej aplikacji.

WebdriverIO

WebdriverIO jest, podobnie jak Cypress, alternatywnym narzędziem do uruchamiania testów opartym na przeglądarce i stanowi uzupełnienie dla Vitest. Może być używany jako narzędzie do testowania end-to-end, a także do testowania komponentów webowych. Wykorzystuje nawet wewnętrznie komponenty Vitest, np. do mockowania i stubbingowania w testach komponentów.

WebdriverIO oferuje te same zalety co Cypress, umożliwiając testowanie logiki w prawdziwej przeglądarce. Jednakże, wykorzystuje rzeczywiste standardy webowe do automatyzacji, co pozwala przezwyciężyć niektóre kompromisy i ograniczenia występujące podczas uruchamiania testów w Cypress. Ponadto, umożliwia uruchamianie testów również na urządzeniach mobilnych, co pozwala na testowanie aplikacji w jeszcze większej liczbie środowisk.

Web Test Runner

@web/test-runner wykonuje testy w bezgłowej przeglądarce, zapewniając to samo środowisko wykonawcze co twoja aplikacja webowa, bez potrzeby tworzenia atrap dla API przeglądarki lub DOM. Umożliwia to także debugowanie w prawdziwej przeglądarce przy użyciu narzędzi developerskich, chociaż nie ma interfejsu użytkownika do wizualnego śledzenia przebiegu testu, jak ma to miejsce w testach Cypress.

Aby użyć @web/test-runner z projektem Vite, użyj @remcovaes/web-test-runner-vite-plugin. @web/test-runner nie dostarcza bibliotek do asercji ani mockowania, więc ich dodanie zależy od Ciebie.

uvu

uvu to narzędzie do uruchamiania testów dla Node.js i przeglądarki. Wykonuje testy w jednym wątku, co oznacza, że testy nie są odizolowane i mogą wpływać na siebie nawzajem (np. poprzez współdzielenie stanu) między plikami. Vitest natomiast używa wątków roboczych do izolowania testów i uruchamiania ich równolegle.

Do transformacji kodu uvu opiera się na mechanizmach require i loader. Vitest używa Vite, dzięki czemu pliki są transformowane z wykorzystaniem pełnych możliwości systemu wtyczek Vite. W świecie, w którym Vite zapewnia wsparcie dla najpopularniejszych narzędzi webowych (TypeScript, JSX, najpopularniejsze frameworki UI), uvu wprowadza zbędną złożoność. Jeśli twoja aplikacja jest oparta na Vite, posiadanie dwóch różnych potoków do konfiguracji i utrzymania nie jest uzasadnione. Dzięki Vitest możesz zdefiniować konfigurację dla środowisk deweloperskich, budowania i testowania w ramach jednego potoku, współdzieląc te same wtyczki i tę samą konfigurację.

uvu nie oferuje inteligentnego trybu obserwacji do ponownego uruchamiania zmienionych testów, podczas gdy Vitest zapewnia znaczną poprawę DX dzięki domyślnemu trybowi obserwacji wykorzystującemu natychmiastowe Hot Module Reload (HMR) Vite.

uvu to szybka opcja do uruchamiania prostych testów, ale Vitest może być szybszy i bardziej niezawodny dla bardziej złożonych testów i projektów.