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

Jest

Jest zdominował rynek frameworków testowych, oferując gotowe wsparcie dla większości projektów JavaScript, wygodne API (it i expect) oraz pełen zestaw funkcji testowych, których wymaga większość konfiguracji (migawki, atrapy, pokrycie kodu). Jesteśmy wdzięczni zespołowi i społeczności Jest za stworzenie wspaniałego API testowego i wprowadzenie wielu wzorców testowania, które są teraz standardem w ekosystemie webowym.

Możliwe jest używanie Jest w konfiguracjach Vite. @sodatea stworzył vite-jest, którego celem jest zapewnienie integracji Vite pierwszej klasy dla Jest. Ostatnie problemy w Jest zostały rozwiązane, więc jest to dobra alternatywa dla testów jednostkowych w twojej aplikacji.

Jednak w świecie, w którym Vite wspiera najpopularniejsze narzędzia webowe (TypeScript, JSX, najpopularniejsze frameworki UI), Jest może niepotrzebnie komplikować konfigurację. Jeśli twoja aplikacja jest oparta na Vite, utrzymywanie dwóch różnych procesów do konfiguracji i utrzymania może być nieuzasadnione. Z Vitest możesz zdefiniować konfigurację dla środowisk deweloperskich, budowania i testowania jako pojedynczy potok, współdzieląc te same wtyczki i ten sam 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 uruchamianie testów jednostkowych i poprawia komfort pracy programisty (DX) dzięki domyślnemu trybowi watch wykorzystującemu natychmiastowe Hot Module Replacement (HMR) Vite. Vitest oferuje kompatybilność z większością API Jest i bibliotek ekosystemu, więc w większości projektów powinien być gotowym zamiennikiem dla Jest.

Cypress

Cypress to narzędzie do uruchamiania testów w przeglądarce i narzędzie komplementarne do Vitest. Jeśli chcesz używać Cypress, sugerujemy używanie Vitest dla całej logiki headless w twojej aplikacji i Cypress dla całej logiki opartej na przeglądarce.

Cypress jest znany jako narzędzie do testów end-to-end (E2E), czyli testów kompleksowych, ale ich nowy runner do testów komponentów ma świetne wsparcie dla testowania komponentów Vite i jest idealnym wyborem do testowania wszystkiego, co jest renderowane w przeglądarce.

Narzędzia do uruchamiania testów oparte na przeglądarce, takie jak Cypress, WebdriverIO i Web Test Runner, wychwycą problemy, których Vitest nie może, ponieważ używają prawdziwej przeglądarki i prawdziwych API przeglądarki.

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

Z kolei Vitest koncentruje się na zapewnieniu najlepszego możliwego DX dla błyskawicznych, headless testów. Narzędzia do uruchamiania testów oparte na Node.js, takie jak Vitest, obsługują różne częściowo zaimplementowane środowiska przeglądarkowe, takie jak jsdom, które implementują wystarczająco dużo, aby szybko testować jednostkowo dowolny kod, który odwołuje się do API przeglądarki. Kompromisem jest to, że te środowiska przeglądarkowe mają ograniczenia w tym, co mogą zaimplementować. Na przykład, w jsdom brakuje wielu funkcji, takich jak window.navigation lub mechanizm układu (offsetTop itp.).

Wreszcie, w przeciwieństwie do Web Test Runner, Cypress jest bardziej podobny do IDE niż do zwykłego narzędzia do uruchamiania testów, ponieważ widzisz również prawdziwy renderowany komponent w przeglądarce, wraz z wynikami testów i logami.

Cypress również integruje Vite w swoich produktach: przebudowuje interfejs użytkownika swojej aplikacji, wykorzystując Vitesse, i używa Vite do testowania w trakcie rozwoju projektu.

Uważamy, że Cypress nie jest najlepszą opcją do testowania jednostkowego kodu bez interfejsu graficznego, ale używanie Cypress (do testów E2E i testowania komponentów) i Vitest (do testów jednostkowych) zaspokoi potrzeby testowe twojej aplikacji.

WebdriverIO

WebdriverIO jest, podobnie jak Cypress, alternatywnym narzędziem do uruchamiania testów opartym na przeglądarce i narzędziem komplementarnym do Vitest. Może być używany jako narzędzie do testów end-to-end, a także do testowania komponentów webowych. Wykorzystuje nawet komponenty Vitest w tle, np. do tworzenia atrap i podstawień w testach komponentów.

WebdriverIO, podobnie jak Cypress, umożliwia testowanie logiki w prawdziwej przeglądarce. Jednak używa rzeczywistych standardów webowych do automatyzacji, co eliminuje niektóre kompromisy i ograniczenia występujące podczas uruchamiania testów w Cypress. Ponadto umożliwia uruchamianie testów na urządzeniach mobilnych, dając dostęp do testowania aplikacji w jeszcze większej liczbie środowisk.

Web Test Runner

@web/test-runner uruchamia testy wewnątrz przeglądarki headless, zapewniając takie samo środowisko wykonawcze jak twoja aplikacja webowa bez potrzeby mockowania API przeglądarki lub DOM. Umożliwia to również debugowanie wewnątrz prawdziwej przeglądarki za pomocą narzędzi deweloperskich, chociaż nie ma interfejsu użytkownika do przechodzenia przez test, jak ma to miejsce w testach Cypress. Istnieje tryb watch, ale nie jest tak inteligentny jak w Vitest i nie zawsze może ponownie uruchamiać testy, które chcesz. Aby użyć @web/test-runner z projektem Vite, użyj @remcovaes/web-test-runner-vite-plugin. @web/test-runner nie zawiera bibliotek asercji ani mockowania, więc musisz je dodać samodzielnie.

uvu

uvu to narzędzie do uruchamiania testów dla Node.js i przeglądarki. Uruchamia testy w jednym wątku, więc testy nie są izolowane i mogą występować wycieki między plikami. Vitest natomiast używa wątków roboczych (ang. worker threads) do izolowania i równoległego uruchamiania testów. Uvu polega na require i hookach loadera do transformacji kodu. Vitest używa Vite, więc pliki są transformowane z pełną mocą systemu wtyczek Vite. W świecie, w którym Vite wspiera najpopularniejsze narzędzia webowe (TypeScript, JSX, najpopularniejsze frameworki UI), uvu duplikuje złożoność. Jeśli twoja aplikacja jest oparta na Vite, posiadanie dwóch różnych procesów do konfiguracji i utrzymania jest nieuzasadnione. Uvu nie oferuje inteligentnego trybu watch do ponownego uruchamiania zmienionych testów, w przeciwieństwie do Vitest, który zapewnia doskonały DX dzięki domyślnemu trybowi watch wykorzystującemu mechanizm natychmiastowego przeładowania modułów na gorąco (HMR) Vite. uvu jest szybką opcją do uruchamiania prostych testów, ale Vitest może być szybszy i bardziej niezawodny dla bardziej złożonych testów i projektów.