Pisanie testów w React jest kluczowe, aby zapewnić, że aplikacje działają zgodnie z oczekiwaniami, wykrywając błędy na wczesnym etapie cyklu programowania i zmniejszając całkowity koszt naprawy problemów.

Testy zapewniają również pewność co do jakości bazy kodu, ułatwiając jej konserwację i refaktoryzację. Testując kod, programiści mogą upewnić się, że spełnia on wymagania i specyfikacje aplikacji oraz zidentyfikować obszary, które mogą wymagać poprawy lub optymalizacji.

Ogólnie rzecz biorąc, testy są niezbędnym elementem procesu tworzenia oprogramowania, poprawiającym jakość i niezawodność aplikacji React.

Stworzyłem ściągawkę na temat React Testing Fundamental , możesz ją pobrać.

Rodzaje testów

Jest to wiele różnych rodzajów testów w każdym poważnym projekcie oprogramowania.

• Testy jednostkowe weryfikują funkcjonalność poszczególnych jednostek lub modułów kodu. W wielu projektach będziesz potrzebować 80% wszystkich testów napisanych w testach jednostkowych.
• Testy integracyjne weryfikują interakcje między różnymi jednostkami lub modułami kodu. Kolejne 15% — 20% na testy integracyjne.
• Testy end-to-end weryfikują funkcjonalność całego systemu lub aplikacji. Ponieważ testy kompleksowe są prawdziwe — co oznacza, że ​​wymagają wielu zasobów, a ponieważ łączą rzeczywiste komponenty (bazę danych, sieć i usługi stron trzecich), są drogie, delikatne i powinny być używane tylko przez większość ścieżki krytyczne. Zwykle nie będziesz mieć tutaj zbyt wielu testów (około 5%).

Zanim przejdziemy do testów, zapoznajmy się z podstawową terminologią.

Biegacz Testowy

Test runner to narzędzie, które wykonuje automatyczne testy napisane dla aplikacji i raportuje wyniki użytkownikowi. Zapewnia środowisko do uruchamiania testów i zbierania wyników testów. Programy uruchamiające testy można skonfigurować do uruchamiania różnych typów testów, takich jak testy jednostkowe, testy integracyjne i testy kompleksowe.

Zasadniczo osoba przeprowadzająca testy może planować i uruchamiać testy równolegle, upewniając się, że funkcje konfiguracji i usuwania są wywoływane we właściwym czasie itp. Ponadto można je skonfigurować tak, aby przeprowadzały tylko niewielki podzbiór testów — co jest pomocne dla większy projekt zawierający tysiące testów.

Niektóre znane narzędzia do uruchamiania testów dla aplikacji JavaScript i React to Jest, Mocha i Cypress.

Pakiet testowy

W Jest zestaw testów jest definiowany za pomocą describefunkcji, która przyjmuje dwa argumenty: łańcuch opisujący zestaw i funkcję wywołania zwrotnego zawierającą jeden lub więcej przypadków testowych używających funkcji testlub it. Funkcja describepozwala na grupowanie powiązanych testów w jeden pakiet. Na przykład:

describe('calculator', () => {
  test('addition', () => {
    expect(1+1).toBe(2);
  });

  test('subtract', () => {
    expect(5-3).toBe(2);
  });
});

Aby przetestować aplikację React, będziemy potrzebować React-Testing-Library w tym samouczku. React Testing Library to lekka biblioteka do testowania komponentów React. Zapewnia zestaw narzędzi, które pozwalają programistom pisać testy symulujące zachowanie użytkownika i potwierdzające, że ich komponenty renderują się poprawnie w oparciu o to zachowanie. Biblioteka koncentruje się na testowaniu zachowania komponentów, a nie na szczegółach ich implementacji, co sprawia, że ​​testy są bardziej odporne na zmiany w implementacji komponentu.

Ponadto biblioteka zachęca programistów do pisania testów, które bardzo przypominają interakcję użytkowników z komponentem. Może to pomóc w wyłapywaniu błędów, które mogą nie zostać wykryte przez testy skupiające się tylko na szczegółach implementacji.

Pisanie testu podstawowego

Nasz pierwszy test byłby prostym plikiem render. Ten test wykorzystuje renderfunkcję from @testing-library/reactdo renderowania AComponentkomponentu i oczekuje, że będzie ona renderowana bez błędów:

import React from 'react';  
import { render } from '@testing-library/react';  
​  
import AComponent from './AComponent.tsx';  
​  
test('renders AComponent without errors', () => {  
  render(<AComponent />);  
});

Na przykład:

import React from 'react';  
import { render, fireEvent, screen } from '@testing-library/react';  
import AComponent from './AComponent';  
​  
test('updates state when button is clicked', () => {  
  const { getByText } = render(<AComponent />);
  
  const button = screen.getByText('Click me');
  fireEvent.click(button);
  expect(button).toHaveTextContent('Clicked!');
});

Uwaga: Podczas gdy metoda fireEvent dostarczana przez React Testing Library może symulować interakcje użytkownika, często bardziej realistyczne jest użycie biblioteki userEvent. `userEvent` zapewnia dokładniejszą symulację interakcji użytkownika z twoimi komponentami i może pomóc w wyłapywaniu błędów, które mogą nie zostać wyłapane przy użyciu bardziej abstrakcyjnej metody fireEvent.

Użyj userEventdo realistycznej akcji

userEvent zapewnia dokładniejszą symulację interakcji użytkowników z Twoimi komponentami.

import { render, screen } from "@testing-library/react";  
import userEvent from "@testing-library/user-event";  
import Button from "./Button";  
​  
test("clicking a button", () => {  
  render(<Button />);
  
  const button = screen.getByRole("button");
  userEvent.click(button);
    
  expect(button).toHaveTextContent("Clicked");
});

import React from 'react';
import { render, screen } from '@testing-library/react';
import AComponent from './AComponent';

test('renders list of items correctly', () => {
  const items = [
    { id: 1, text: 'Item 1' },
    { id: 2, text: 'Item 2' },
    { id: 3, text: 'Item 3' },
  ];
  
  const { getAllByTestId } = render(<AComponent items={items} />);
  
  const itemsList = screen.getAllByTestId('item');
  expect(itemsList).toHaveLength(items.length);
  
  itemsList.forEach((item, index) => {
    expect(item).toHaveTextContent(items[index].text);
  });
});

Wyśmiewanie i kłucie

W niektórych przypadkach może być konieczne wyizolowanie zależności w celu ułatwienia testowania złożonego kodu. Wyśmiewanie i stubbing to techniki tworzenia fałszywych obiektów lub funkcji, które symulują zachowanie rzeczywistych zależności.

Mocki to fałszywe obiekty, które mają z góry określone zachowanie i mogą być używane do zastępowania rzeczywistych obiektów w testach. Kody pośredniczące to fałszywe funkcje, które zastępują prawdziwe funkcje w testach i zwracają wstępnie zdefiniowane wartości. Martin Fowler ma stary, bardziej wnikliwy artykuł na temat mocków i kodów pośredniczących oraz niektórych praktyk testowania. Przeczytaj, jeśli jeszcze tego nie zrobiłeś.

Oto przykład użycia makiety do wyizolowania zależności w teście:

import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from "@testing-library/user-event";  

import axios from 'axios';

import AComponent from './AComponent';

jest.mock('axios');

test('fetches data and updates state', async () => {
  const data = { id: 1, name: 'John' };
  
  axios.get.mockResolvedValue({ data });
  
  const { getByText } = render(<AComponent />);
  const button = screen.getByText('Fetch data');
  
  userEvent.click(button);
  
  const dataElement = screen.getByText(data.name);
  expect(dataElement).toBeInTheDocument();
});

Raport z testów

Możesz także wygenerować raport z testu, aby zobaczyć dane statystyczne i przeprowadzić analizę zmian zasięgu w czasie. To świetny sposób na udostępnianie tych danych w środowisku ciągłej integracji, aby wszyscy w zespole mogli to wyraźnie zobaczyć.

Najpierw zainstaluj pakiet jest-html-reportersw katalogu głównym swojego projektu. A następnie w package.json, dodaj jeszcze jedno polecenie reportw sekcji skryptów. I za każdym razem, gdy biegniesz npm run report, wygeneruje dla Ciebie raport.

"report": "react-scripts test --env=jsdom --reporters=default \
--reporters=jest-html-reporters"

Podsumowując, testowanie jest istotną częścią tworzenia oprogramowania i ma kluczowe znaczenie dla zapewnienia, że ​​baza kodu jest niezawodna i wysokiej jakości. Jest i React-Testing-Library to świetne narzędzia do testowania aplikacji React, a dzięki nim programiści mogą wcześnie wykryć błędy, obniżyć koszty naprawy problemów i mieć pewność co do jakości swojego kodu.

Ponadto, dzięki odpowiedniej konfiguracji i raportowaniu, programiści mogą łatwo monitorować kondycję swojej bazy kodu i identyfikować obszary wymagające poprawy. Włączając testowanie do swojego procesu programistycznego, programiści mogą tworzyć lepsze aplikacje React i zapewniać lepsze wrażenia użytkownika.

Jeśli podoba Ci się lektura, zapisz się na moją listę mailingową . Co tydzień dzielę się technikami czystego kodu i refaktoryzacji za pośrednictwem blogów , książek i filmów .