Jak testować aplikacje Next.js za pomocą Jest

Podstawowym celem każdego procesu programistycznego jest zbudowanie aplikacji gotowych do produkcji. Aby to osiągnąć, niezbędne jest napisanie kodu, który nie tylko spełnia wymagania funkcjonalne, ale także pozostaje stabilny i niezawodny w czasie. Testowanie służy jako zabezpieczenie, które zapewnia, że ​​aplikacje działają zgodnie z oczekiwaniami, nawet jeśli w trakcie opracowywania wprowadzane są nowe aktualizacje.

Chociaż pisanie kompleksowych testów obejmujących różne przypadki brzegowe może zająć dużo czasu, pomaga oznaczać i rozwiązywać problemy, zanim dotrą one do środowisk produkcyjnych.

Testowanie aplikacji Next.js

Pisanie testów jest niezbędnym i często niedocenianym aspektem tworzenia solidnych aplikacji. Łatwo wpaść w pokusę wysyłania kodu bezpośrednio do produkcji, opierając się na przekonaniu, że „jesteś autorem kodu, więc musi działać!”

Jednak takie podejście może prowadzić do nieprzewidzianych problemów i błędów w środowiskach produkcyjnych. W rezultacie przyjęcie podejścia opartego na testach (TDD) może pomóc zmaksymalizować zaufanie do kodu i zminimalizować czas spędzony

Co to jest Jest?

Żart to popularny framework testowy, który jest szeroko używany przez różne osoby Frameworki JavaScript. Zapewnia zestaw funkcji testowych, takich jak potężny program do uruchamiania testów, automatyczne kpiny i testowanie migawek.

W idealnej sytuacji te funkcje przydają się do uzyskania kompleksowego pokrycia testowego i zapewnienia niezawodności aplikacji w całym zakresie różne rodzaje testów.

Utwórz aplikację Next.js do wykonania

Teraz zagłębimy się w proces uruchamiania testów jednostkowych w aplikacji Next.js przy użyciu Jest. Jednak zanim zaczniesz, utwórz projekt Next.js i zainstaluj wymagane zależności.

Aby rozpocząć, wykonaj następujące kroki:

1. Utwórz nowy projekt Next.js, uruchamiając następujące polecenie w swoim terminalu:

   npx create-next-app@najnowszy samouczek testowy

2. Po utworzeniu projektu przejdź do katalogu projektu, uruchamiając:

   cd nextjs-poradnik-testowy

3. Zainstaluj niezbędne zależności jako devZależności uruchamiając następujące polecenie:

   npm install npm install --save-dev jest @testing-library/react @testing-library/jest-dom jest-environment-jsdom

Po skonfigurowaniu projektu i zainstalowaniu zależności możesz teraz zbudować aplikację Next.js i napisać testy jednostkowe przy użyciu Jest.

Utwórz komponent do wykonania

w /src katalog projektu, otwórz plik strony/index.js usuń istniejący kod standardowy Next.js i dodaj następujący kod.

Najpierw wykonaj następujące importy i zdefiniuj dwie funkcje, które będą zarządzać zadaniami do wykonania użytkownika: dodajTodo funkcja i usuń Todo funkcjonować.

import { stan użycia } z"reagować";
import style z"../styles/Home.module.css";
eksportdomyślnyfunkcjonowaćDom() {
konst [todos, setTodos] = useState([]);
konst [noweZadanie, ustawNoweZadanie] = użyjStan("");
konst dodajDo zrobienia = () => {
Jeśli (newTodo.trim() !== "") {
konst updatedTodos = [...todos, newTodo];
 setTodos (zaktualizowaneTodos);
 setNewTodo("");
 }
 };
konst usuń zadanie = (indeks) => {
konst zaktualizowaneTodos = [...todos];
 zaktualizowanoTodos.splice (indeks, 1);
 setTodos (zaktualizowaneTodos);
 };

Kod wykorzystuje tzw stan użycia hook, aby zainicjować i zaktualizować zmienne stanu: todos I nowośćTodo. The dodajTodo funkcja dodaje nowe zadanie do zrobienia do listy rzeczy do zrobienia, gdy wartość wejściowa nie jest pusta, podczas gdy funkcja usuń Todo funkcja usuwa określone zadanie do wykonania z listy na podstawie jego indeksu.

Teraz napisz kod dla elementów JSX renderowanych w DOM przeglądarki.

powrót (


 typ="tekst"
 className={styles.input}
 wartość={noweDo zrobienia}
 data-testid=„todo-input”
 onChange={(e) => setNewTodo (e.target.value)}
 />
„dodane do zrobienia”>
 Dodaj do zrobienia
 </button>
"Lista rzeczy do zrobienia">
 {todos.map((todo, indeks) => (


 {do zrobienia}
 </li>
 ))}
 </ul>
 {todos.map((todo, indeks) => (


 onClick={() => usuń zadanie (indeks)}
 className={styles.button}
 data-testid={`usuń-do zrobienia-${indeks}`}
 >
 Usuwać
 </button>
 </div>
 ))}
 </div>
 );}

Pisanie przypadków testowych

Zanim zaczniesz pisać przypadki testowe, bardzo ważne jest, aby skonfigurować Jest zgodnie ze swoimi specyficznymi wymaganiami testowymi. Obejmuje to tworzenie i dostosowywanie pliku jest.config.js plik, który służy jako podstawa konfiguracji testowej.

W katalogu głównym utwórz nowy jest.config.js plik. Następnie dodaj następujący kod, aby odpowiednio skonfigurować Jest:

konst następnyJest = wymagać(„następny / żart”);
konst createJestConfig = nextJest({
 reż: "./",
});
konst customJestConfig = {
 modułKatalogi: ["moduły_węzłów", "/"],
 Środowisko testowe: "jest-środowisko-jsdom",
};
moduł.exports = createJestConfig (customJestConfig);

Na koniec otwórz pakiet.json plik i dodaj nowy skrypt o nazwie test który wykona polecenie żart --watchAll aby uruchomić wszystkie przypadki testowe i obserwować wszelkie zmiany.

Po dokonaniu aktualizacji Twoje skrypty powinny wyglądać tak:

„skrypty”: {
„deweloper”: „następny deweloper”,
"zbudować": „następna konstrukcja”,
"początek": „następny start”,
"szarpie": „następna kłaczka”,
"test": „jest — oglądaj wszystko”
 },

Po skonfigurowaniu konfiguracji przejdź do pisania i wykonywania testów.

Testowanie aplikacji Next.js To-Do za pomocą Jest

W katalogu głównym projektu utwórz nowy folder o nazwie __testy__. Jest wyszuka pliki testowe w tym folderze. W tym folderze utwórz nowy plik o nazwie indeks.test.js.

Najpierw wykonaj następujące importy.

import Dom z„../źródło/strony/indeks”;
import"@biblioteka-testowa/jest-dom";
import { fireEvent, renderuj, ekran, czekaj, działaj } z"@biblioteka-testowa/reaguj";

Napisz test, aby sprawdzić, czy wszystkie elementy renderują się poprawnie:

opisać(„Aplikacja do zrobienia”, () => {
 To(„renderuje aplikację do zrobienia”, () => {
 renderowanie(<Dom />);

 oczekuj (screen.getByTestId(„todo-input”)).toBeInTheDocument();
 oczekuj (screen.getByTestId(„dodane do zrobienia”)).toBeInTheDocument();
 });
});

Przypadek testowy sprawdza, czy aplikacja To-Do i jej elementy renderują się poprawnie. Wewnątrz obudowy testowej, Dom komponent jest renderowany przy użyciu renderowanie funkcja z biblioteki testowej.

Następnie twierdzenia są dokonywane za pomocą oczekiwać aby zapewnić, że określone elementy z identyfikatorami testów, takie jak wejście do zrobienia są obecne w renderowanym wyjściu. Jeśli te elementy zostaną znalezione w DOM, test zakończy się pomyślnie; w przeciwnym razie zawodzi.

Teraz uruchom następujące polecenie, aby wykonać test.

test uruchomienia npm

Powinieneś zobaczyć podobną odpowiedź, jeśli test zakończy się pomyślnie.

Testowanie różnych działań i symulowanie błędów

Opisz te przypadki testowe, aby zweryfikować działanie funkcji Dodaj zadanie do wykonania i Usuń zadanie do wykonania.

Zacznij od napisania przypadku testowego dla funkcji Dodaj zadanie do wykonania.

 To(„dodaje zadanie”, asynchroniczny () => {
 renderowanie(<Dom />);

konst todoInput = screen.getByTestId(„todo-input”);
konst addTodoButton = screen.getByTestId(„dodane do zrobienia”);
konst todoList = screen.getByTestId("Lista rzeczy do zrobienia");
czekać na działać(asynchroniczny () => {
 fireEvent.change (todoInput, { cel: { wartość: „Nowe zadanie” } });
 addTodoButton.click();
 });
czekać na Poczekaj na(() => {
 spodziewaj się (todoList).toHaveTextContent(„Nowe zadanie”);
 });
 });

Powyższy fragment kodu symuluje interakcję użytkownika poprzez wpisanie go w polu wejściowym i kliknięcie przycisku dodawania. Następnie, używając fałszywej wartości wejściowej zadania do wykonania, sprawdza, czy wartość wejściowa została pomyślnie dodana do listy zadań do wykonania.

Zapisz plik i sprawdź terminal. Test powinien zostać automatycznie ponownie uruchomiony i wylogować podobne wyniki testu.

Aby zasymulować błąd testu, zmodyfikuj identyfikator testu przycisku dodawania i ponownie uruchom test. W przypadku tej aktualizacji test powinien zakończyć się niepowodzeniem i wylogowaniem z komunikatem o błędzie wskazującym napotkany konkretny błąd.

W idealnej sytuacji w przypadku większej bazy kodu, w której wielu współpracowników dokonuje częstych zmian, testowanie odgrywa kluczową rolę w identyfikowaniu potencjalnych błędów, które mogą prowadzić do awarii systemu. Testując, możesz łatwo wykryć niespójności, takie jak ta pokazana powyżej, i rozwiązać je podczas programowania.

Na koniec napisz przypadek testowy dla funkcji Usuń zadanie do wykonania.

 To(„usuwa zadanie”, asynchroniczny () => {
 renderowanie(<Dom />);

konst todoInput = screen.getByTestId(„todo-input”);
konst addTodoButton = screen.getByTestId(„dodane do zrobienia”);

 fireEvent.change (todoInput, { cel: { wartość: „Do zrobienia 1” } });
 fireEvent.click (addTodoButton);

konst deleteTodoButton = screen.getByTestId("usuń-do zrobienia-0");
 fireEvent.click (deleteTodoButton);

konst todoList = screen.getByTestId("Lista rzeczy do zrobienia");
czekać na Poczekaj na(() => {
 spodziewaj się (todoList).toBeEmptyDOMElement();
 });
 });

Ponownie sprawdza, czy zadanie do wykonania zostało pomyślnie usunięte. Zapisz plik, aby wykonać test.

Testy jednostkowe przy użyciu Jest

Ten przewodnik dostarczył Ci wiedzy na temat pisania i wykonywania prostych testów jednostkowych na przykładzie komponentu To-Do. Aby zapewnić stabilność i niezawodność podstawowych funkcji aplikacji i zmniejszyć szanse nieoczekiwanych problemów w środowiskach produkcyjnych, ważne jest, aby nadać priorytet testom pisania klucza składniki.

Ponadto możesz udoskonalić swoje podejście do testowania, włączając testy migawek i testy kompleksowe.