Jak skonfigurować Jest do testowania reakcji?

Ponieważ coraz więcej programistów wybiera React jako framework front-end, coraz ważniejsze staje się zapewnienie, że pisany przez nas kod jest najwyższej jakości. Jednym z ważnych aspektów zapewniania jakości jest testowanie, a Jest to popularna platforma testowa, często używana z React.

Jest to platforma testowa typu open source stworzona przez Facebooka i zaprojektowana tak, aby testowanie kodu JavaScript było tak łatwe i wydajne, jak to tylko możliwe. Jest szybki, ma łatwy w użyciu interfejs API i ma wiele wbudowanych funkcji, które sprawiają, że testowanie jest dziecinnie proste.

W tym artykule przeprowadzimy Cię przez proces konfigurowania Jest do testowania React. Omówimy wszystko, co musisz wiedzieć, aby zacząć, od instalacji Jest po napisanie pierwszego przypadku testowego.

Jest do testowania reakcji

Jest to popularny framework testowy służący do testowania aplikacji React. Jest tworzony przez Facebooka i jest znany z łatwości użytkowania i szybkiego czasu konfiguracji. Jest został zaprojektowany do współpracy z React od razu po wyjęciu z pudełka i zapewnia wiele funkcji ułatwiających testowanie.

Oto niektóre funkcje, które sprawiają, że Jest popularnym wyborem do testowania aplikacji React:

i) Testowanie migawek: Jest zapewnia funkcję testowania migawek, która pozwala porównać bieżące wyjście komponentu z wcześniej zapisaną migawką. Ułatwia to sprawdzenie, czy w danych wyjściowych komponentu nie wprowadzono żadnych niezamierzonych zmian.

ii) Mocking: Jest zapewnia wbudowane możliwości mockingu, które pozwalają tworzyć fałszywe funkcje i moduły. Jest to przydatne, gdy trzeba zasymulować zachowanie funkcji lub modułu, który nie jest łatwo dostępny lub trudny do przetestowania.

iii) Pokrycie kodu: Jest udostępnia raport pokrycia kodu, który pokazuje procent kodu pokryty przez twoje testy. Jest to przydatne do identyfikowania obszarów kodu, które nie zostały przetestowane i mogą wymagać dodatkowej uwagi.

iv) Testowanie asynchroniczne: Jest ułatwia testowanie kodu asynchronicznego, udostępniając narzędzia do zarządzania kodem asynchronicznym. Pozwala to na pisanie testów, które czekają na rozwiązanie obietnic lub innego kodu asynchronicznego przed dokonaniem asercji.

v) Łatwa konfiguracja: Jest łatwy do skonfigurowania i skonfigurowania dla aplikacji React. Jest dostarczany z domyślną konfiguracją, która działa od razu po wyjęciu z pudełka, ale można ją dostosować do własnych potrzeb.

Ogólnie rzecz biorąc, Jest to potężne i elastyczne środowisko testowe, które ułatwia testowanie aplikacji React. Jego liczne funkcje i łatwa konfiguracja sprawiają, że jest to popularny wybór dla programistów, którzy chcą pisać niezawodne testy dla swoich komponentów React.

Konfigurowanie Jest do testowania reakcji

Istnieją pewne kroki, które należy wykonać, aby skonfigurować Jest do testowania React w 2023 roku.

1) Zainstaluj Jest

Jest można zainstalować w swoim projekcie za pomocą npm lub przędzy. Oto kroki, aby zainstalować Jest za pomocą npm:

i) Otwórz terminal lub wiersz poleceń i przejdź do katalogu projektu.

ii) Uruchom następujące polecenie, aby zainstalować Jest jako zależność programistyczną w swoim projekcie:

npm install –save-dev jest

To polecenie zainstaluje Jest i doda go do pliku package.json twojego projektu w sekcji devDependencies.

Po zakończeniu instalacji możesz rozpocząć pisanie testów za pomocą Jest. Możesz uruchomić testy za pomocą polecenia npm test. Domyślnie Jest szuka plików testowych o nazwach z rozszerzeniem .test.js lub .spec.js . Można jednak skonfigurować Jest do wyszukiwania testów z innymi rozszerzeniami, modyfikując właściwość testMatch w pliku konfiguracyjnym Jest.

Otóż ​​to! Masz teraz zainstalowany Jest w swoim projekcie i możesz zacząć pisać testy dla swojej aplikacji.

2) Utwórz plik konfiguracyjny

Aby utworzyć plik konfiguracyjny dla Jest, możesz utworzyć plik o nazwie jest.config.js w katalogu głównym swojego projektu. Ten plik będzie zawierał opcje konfiguracyjne, których Jest powinien używać podczas uruchamiania testów.

Oto przykładowy plik konfiguracyjny:

moduł.eksport = {

// Wskazuje, które typy plików należy traktować jako pliki testowe.

testDopasowanie: [

'**/__testy__/**/*.js?(x)',

'**/?(*.)+(specyfikacja|test).js?(x)'

],

// Lista ścieżek do katalogów, w których Jest powinien szukać plików.

korzenie: ['<katalog_główny>/src'],

// Mapa od wyrażeń regularnych do ścieżek do transformatorów.

przekształć: {

'^.+\\.(js|jsx|ts|tsx)$': 'babel-jest'

},

// Wzorce globalne używane przez Jest do wykrywania plików testowych.

testPathIgnorePatterns: [

'<katalog główny>/moduły_węzłów/',

„<katalog główny>/kompilacja/”

],

// Lista nazwisk reporterów, których Jest używa podczas pisania raportów pokrycia.

reporterzy pokrycia: ['json', 'tekst', 'html'],

// Tablica rozszerzeń plików używanych przez moduły.

moduleFileExtensions: ['js', 'json', 'jsx']

};

Ten przykładowy plik konfiguracyjny określa następujące opcje:

a) testMatch: Określa wzorzec używany do identyfikacji plików testowych.

b) root: Określa katalogi, w których Jest ma szukać plików.

c) transform: Określa transformacje, które Jest powinien zastosować do plików przed uruchomieniem testów.

d) testPathIgnorePatterns: Określa wzorce, które mają być ignorowane podczas wyszukiwania plików testowych.

e) reporterzy pokrycia: określa reporterów, których Jest powinien używać do generowania raportów pokrycia.

f) moduleFileExtensions: Określa rozszerzenia plików, których Jest powinien szukać podczas wyszukiwania plików.

Możesz zmodyfikować ten plik konfiguracyjny, aby dostosować go do potrzeb swojego projektu. Po utworzeniu pliku konfiguracyjnego, Jest automatycznie użyje go podczas uruchamiania testów w Twoim projekcie.

3) Napisz swoje testy

Po zainstalowaniu Jest i skonfigurowaniu pliku konfiguracyjnego możesz zacząć pisać testy dla swojej aplikacji React. Oto kroki, aby utworzyć plik testowy i napisać test:

i) Utwórz nowy plik z rozszerzeniem .test.js lub .spec.js . To będzie twój plik testowy.

ii) W pliku testowym zaimportuj komponent lub funkcję, którą chcesz przetestować:

import { suma } z „./myFunctions”;

iii) Napisz test. Test to funkcja, która używa interfejsu API Jest do sprawdzania, czy komponent lub funkcja zachowuje się zgodnie z oczekiwaniami:

opisz('suma', () => {

test('dodaje 1 + 2 do równego 3', () => {

spodziewaj się(suma(1, 2)).toBe(3);

});

});

W tym przykładzie testujemy prostą funkcję sumującą, która dodaje dwie liczby. Funkcja opisująca grupuje powiązane testy, podczas gdy funkcja test określa pojedynczy przypadek testowy. Funkcja oczekiwania sprawdza, czy funkcja sumy zwraca oczekiwaną wartość.

iv) Uruchom testy, wykonując polecenie npm test w katalogu projektu. Jest wyszuka pliki testowe w twoim projekcie i wykona wszelkie znalezione testy.

Możesz dodać tyle testów, ile potrzebujesz, aby objąć wszystkie funkcje twojego komponentu lub funkcji. Jest zapewnia szeroką gamę dopasowań i innych narzędzi, których można użyć do tworzenia bardziej złożonych testów.

Pisząc testy dla aplikacji React, możesz upewnić się, że Twój kod działa zgodnie z oczekiwaniami i uniknąć wprowadzania regresji podczas wprowadzania zmian w bazie kodu.

4) Przeprowadź testy

Aby uruchomić testy za pomocą Jest, możesz użyć polecenia npm test w katalogu projektu. Jest automatycznie wykryje i uruchomi wszystkie pliki testowe w twoim projekcie, które pasują do wzorca określonego w twoim pliku konfiguracyjnym Jest.

Kiedy uruchomisz npm test, Jest wyświetli wyniki twoich testów w konsoli. Jeśli wszystkie testy zakończą się pomyślnie, Jest wyświetli podsumowanie wyników testu:

PASS src/components/Example.test.js

✓ renderuje bez zawieszania się (21ms)

Zestawy testów: 1 zdany, łącznie 1

Testy: 1 zdany, 1 łącznie

Migawki: łącznie 0

Czas: 3,204 s, szacunkowo 4 s

Uruchomiono wszystkie zestawy testów.

Jeśli jakikolwiek test zakończy się niepowodzeniem, Jest wyświetli komunikat o błędzie opisujący błąd i lokalizację testu, który zakończył się niepowodzeniem:

ŹRÓDŁO NIEPOWODZENIA src/components/Example.test.js

• Przykładowy komponent › renderuje się bez awarii

TypeError: Nie można odczytać właściwości „map” niezdefiniowanej

10 | renderowanie() {

11 | const { elementy } = this.props;

> 12 | return items.map(item => <div key={item.id}>{item.name}</div>);

| ^

13 | }

14 | }

15 |

w Example.render (src/components/Example.js:12:17)

w ReactTestRenderer.render (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1052:32)

w Obiekt.<anonimowy> (src/components/Example.test.js:9:16)

Zestawy testów: 1 nieudany, 1 łącznie

Testy: 1 nie powiodło się, 1 ogółem

Migawki: łącznie 0

Czas: 3,537 s, szacunkowo 4 s

Uruchomiono wszystkie zestawy testów.

Jest również udostępnia szereg opcji, których można użyć do dostosowania zachowania testów, takich jak uruchamianie testów w trybie podglądu, generowanie raportów pokrycia kodu i nie tylko. Więcej informacji na temat tych opcji można znaleźć w dokumentacji Jest.

Podsumowanie

LambdaTest to potężna platforma testowa oparta na chmurze, której można używać w połączeniu z Jest do testowania aplikacji React. Wykorzystując skalowalność infrastruktury opartej na chmurze LambdaTest, możesz szybko i wydajnie przeprowadzać testy Jest na szerokiej gamie przeglądarek i urządzeń, upewniając się, że Twoja aplikacja działa zgodnie z oczekiwaniami w różnych środowiskach.

Na tym blogu omówiliśmy kroki wymagane do skonfigurowania Jest do testowania aplikacji React. Dowiedzieliśmy się również, jak skonfigurować Jest, aby używał LambdaTest jako środowiska testowego, pisać testy za pomocą Jest i wykonywać testy w infrastrukturze opartej na chmurze LambdaTest.

Używanie LambdaTest i Jest razem zapewnia solidne rozwiązanie testowe dla programistów React, które może pomóc im wychwycić regresje i błędy na wczesnym etapie cyklu programowania, poprawiając ogólną jakość ich aplikacji.

Jeśli więc chcesz usprawnić swój przepływ pracy w testach React, rozważ jednoczesne użycie LambdaTest i Jest, aby uzyskać kompleksowe, skalowalne i wydajne testowanie aplikacji React.