Rozwój frontendu polega na budowaniu atrakcyjnych wizualnie, funkcjonalnych aplikacji skierowanych do klienta. Ale jest pewien haczyk; aplikacje te muszą zapewniać użytkownikom bezproblemową obsługę.

Chociaż testy jednostkowe i integracyjne są niezbędne do sprawdzenia funkcjonalności aplikacji, mogą nie w pełni uchwycić typowe interakcje użytkownika. Aby naprawdę symulować podróż użytkownika, należy przeprowadzić kompleksowe testy, które odtwarzają rzeczywiste interakcje użytkownika. Dzięki temu Twoja aplikacja będzie działać zgodnie z oczekiwaniami od początku do końca.

Rozpoczęcie kompleksowych testów przy użyciu Cypress

Głównym celem kompleksowych testów w aplikacjach front-end jest weryfikacja wyników, a nie szczegółów implementacji logiki biznesowej.

Weźmy jako przykład formularz logowania. Najlepiej byłoby sprawdzić, czy ekran logowania pojawia się tak, jak powinien i czy robi to, do czego został przeznaczony. Zasadniczo podstawowe szczegóły techniczne nie są istotne. Ostatecznym celem jest po prostu wejście w buty użytkownika i ocena jego całego doświadczenia.

Cyprys to świetna platforma do testowania automatycznego, która jest kompatybilna z niektórymi najpopularniejsze frameworki JavaScript. Możliwość uruchamiania testów bezpośrednio w przeglądarce oraz kompleksowy zestaw funkcji testowych sprawiają, że testowanie jest płynne i wydajne. Obsługuje również różne podejścia do testowania, w tym:

• Testy jednostkowe
• Testy typu end-to-end
• Testy integracyjne

Aby napisać kompleksowe testy dla aplikacji React, rozważ następujące historie użytkowników:

• Użytkownik może zobaczyć pole wejściowe z odpowiadającym mu przyciskiem przesyłania.
• Użytkownik może wprowadzić zapytanie w polu wejściowym.
• Po kliknięciu przycisku przesyłania użytkownik powinien zobaczyć listę elementów wyświetloną tuż pod polem wejściowym.

Śledząc historie użytkowników, możesz zbudować prostą aplikację React, która pozwoli użytkownikowi wyszukiwać produkty. Aplikacja pobierze dane produktów z Sztuczne API JSON i wyrenderuj go na stronie.

Kod tego projektu znajdziesz w jego pliku GitHub magazyn

Skonfiguruj projekt React

Rozpocząć, utwórz projekt React przy użyciu Vite lub skorzystaj z polecenie create-react-app umożliwiające skonfigurowanie podstawowej aplikacji React. Po zakończeniu procesu instalacji zainstaluj pakiet Cypress jako zależność deweloperską w swoim projekcie:

npm install cypress --save-dev

Teraz zaktualizuj swój pakiet.json plik, dodając ten skrypt:

"test": "npx cypress open"

Utwórz komponent funkcjonalny

w źródło katalog, utwórz folder i nadaj mu nazwę składniki. Wewnątrz tego folderu dodaj nowy produkty.jsx plik i dołącz poniższy kod.

import React, { useState, useEffect } from'react';
import"./style.component.css"
exportdefaultfunctionProducts(prop) {
const [products, setProducts] = useState([]);
const [error, setError] = useState(null); 
const { searchInput } = prop;
return (
"product-catalogue">
 {error? (
Product not found</p>
 ): (

"product-list">
 {products.slice(0, 6).map((product) => (
"product" key={product.id}>
Title: {product.title}</h2>


Price: ${product.price}</p>
 </div>
 ))}
 </div>
 )}
 </div>
 );
}

W komponencie funkcjonalnym zdefiniuj a użyjEfektu hook, który wykonuje funkcję asynchroniczną pobierającą dane produktu na podstawie podanego zapytania.

 useEffect(() => {
const fetchProducts = async () => {
if (searchInput) {
const apiUrl = `https://dummyjson.com/products/category/${searchInput}`;
try {
const response = await fetch(apiUrl);
if (!response.ok) {
thrownewError('Error fetching products');
 }
const json = await response.json();
 setProducts(json.products);
 setError(null); 
 } catch (error) {
 setError(error.message);
 }
 }
 };
 fetchProducts();
 }, [searchInput]);

Zaktualizuj plik App.jsx

Teraz zaktualizuj Aplikacja.jsx plik z następującym kodem:

import React, { useState, useRef } from'react'
import'./App.css'
import Products from'./components/Products'
functionApp() {
const [searchInput, setSearchInput] = useState('')
const searchInputRef = useRef('');
const handleSubmit = (e) => {
 setSearchInput(searchInputRef.current.value);
 }
return (



Cypress Testing Library tutorial</h1>
"input">Input</label>

 id="text"
 type="text"
 ref={searchInputRef}
 />


"btn" type="button" onClick={handleSubmit}>Submit</button>
"products-component" searchInput={searchInput} /> 
 </div>
 )
}
exportdefault App

Śmiało, uruchom serwer programistyczny.

npm run dev

Świetnie! Powinieneś być w stanie pobrać określone dane produktu z fikcyjnego interfejsu API JSON.

Skonfiguruj środowisko testowe

Najpierw uruchom polecenie skryptu testowego na swoim terminalu:

npm run test

To polecenie uruchomi i otworzy klienta Cypress. Śmiało i kliknij Testowanie E2E przycisk.

Następnie kliknij Kontynuować aby dodać pliki konfiguracyjne Cypress.

Po zakończeniu tego procesu powinieneś zobaczyć w swoim projekcie nowy katalog testów Cypress. Dodatkowo klient Cypress automatycznie dodaje plik cypress.config.js. Możesz zaktualizować ten plik, aby jeszcze bardziej dostosować różne aspekty środowiska testowego, zachowania i konfiguracji.

Napisz kompleksowe testy za pomocą Cypress

Aby napisać swój pierwszy test, należy wybrać przeglądarkę, w której będzie uruchamiany test. Wybierz preferowaną opcję spośród dostępnych w kliencie Cypress.

Cypress uruchomi uproszczoną wersję wybranej przeglądarki, tworząc kontrolowane środowisko do przeprowadzania testów.

Wybierz Utwórz nową specyfikację opcję utworzenia pliku testowego.

Przejdź do edytora kodu, otwórz plik cypress/e2e/App.spec.cy.js plik i zaktualizuj zawartość tego pliku następującym kodem.

describe('App Tests', () => {
 beforeEach(() => {
 cy.visit('http://127.0.0.1:5173/'); 
 });
 it('Renders input field and submit button', () => { 
 cy.get('#text').should('exist').should('be.visible');
 cy.get('#btn').should('exist').should('be.visible').contains('Submit');
 });
 it('Enters a search query', () => {
const searchQuery = 'laptops';
 cy.get('#text').type(searchQuery);
 });
});

Wracając do historii użytkowników podkreślonych powyżej, ten konkretny zestaw testów weryfikuje dwa aspekty:

• Aby przeglądarka wyświetlała na stronie pole wejściowe i przycisk przesyłania.
• Że użytkownik może wprowadzić zapytanie.

Podobnie jak inne narzędzia do testowania JavaScript, takie jak Jest i Supertest, Cypress wykorzystuje deklaratywną składnię i język do definiowania przypadków testowych.

Aby uruchomić test, wróć do uproszczonej wersji przeglądarki zarządzanej przez Cypress i wybierz konkretny plik testowy, który chcesz uruchomić.

Cypress przeprowadzi testy i wyświetli wyniki w lewym panelu placu zabaw testowych.

Symulowanie procesów aplikacyjnych

Aby mieć pewność, że przejdziesz i przetestujesz całą podróż użytkownika – w tym konkretnym przypadku użycia – musisz to zweryfikować aplikacja może przyjąć dane wprowadzone przez użytkownika, pobrać wymagane dane i na koniec wyświetlić je w przeglądarce strona.

Dla przejrzystości możesz utworzyć nowy plik testowy, aby pomieścić inny zestaw testów w pliku e2e teczka. Alternatywnie możesz także zdecydować się na uwzględnienie wszystkich zestawów testów badających konkretny przypadek testowy w jednym pliku testowym.

Śmiało, utwórz nowy Produkty.spec.cy.js plik w e2e teczka. Wewnątrz tego pliku umieść następujący kod.

describe('Products Tests', () => {
 it(' fetches and displays the data', () => {
const searchQuery = 'laptops';
 cy.visit('http://127.0.0.1:5173'); 

 cy.get('#text').type(searchQuery);
 cy.get('#btn').contains('Submit').click();

 cy.get('.product').should('have.length.greaterThan', 0);

 cy.get('.product').first().should('contain', 'Title'); 
 cy.get('.product').first().should('contain', 'Price: $');
 });
 });

Ten zestaw testów sprawdza, czy po wprowadzeniu przez użytkownika określonego elementu wyszukiwania aplikacja pobiera i wyświetla dane na stronie przeglądarki.

Czyni to poprzez symulację procesu wprowadzania danych wyszukiwania, kliknięcia przycisku przesyłania i oczekiwania na produkty do załadowania, a następnie sprawdzenie obecności pozycji produktu wraz ze szczegółami, takimi jak tytuł i cena. Krótko mówiąc, przechwytuje i weryfikuje całe doświadczenie z perspektywy użytkownika.

Symulowanie błędów i odpowiedzi

Możesz także symulować różne scenariusze błędów i reakcje w testach Cypress.

Stwórz nowy Błąd.spec.cy.js plik w e2e katalogu i dołącz następujący kod.

describe('Error Handling Tests', () => {
 it('Displays error message for incorrect search query', () => {

 cy.intercept('GET', /https:\/\/dummyjson\.com\/products\/category\/.*/, {
 statusCode: 404, // Not Found
 body: 'Product not found'
 }).as('fetchProducts');
 cy.visit('http://127.0.0.1:5173');
const incorrectSearchQuery = 'rocket';
 cy.get('#text').type(incorrectSearchQuery);
 cy.get('#btn').click();
 cy.wait('@fetchProducts');
 cy.contains('Product not found').should('be.visible');
 });
 });

Ten zestaw testów sprawdza, czy po wprowadzeniu przez użytkownika nieprawidłowego zapytania wyświetlany jest komunikat o błędzie.

Aby przypadek testowy przeszedł pomyślnie, używa Cypress' przechwycić funkcja odcinania sieci i symulowania błędu żądania sieciowego. Następnie sprawdza, czy po wpisaniu nieprawidłowego zapytania w polu wejściowym i rozpoczęciu procesu pobierania, na stronie widoczny jest komunikat o błędzie – Nie znaleziono produktu.

Wynik ten wskazuje, że mechanizm obsługi błędów działa zgodnie z oczekiwaniami.

Używanie Cypress w rozwoju opartym na testach

Testowanie jest podstawowym wymogiem programistycznym, ale może być również procesem czasochłonnym. Jednak włączenie Cypress może przynieść czystą satysfakcję z oglądania razem przebiegających przypadków testowych.

Cypress to doskonałe narzędzie do wdrażania programowania opartego na testach w aplikacjach — nie tylko zapewnia kompleksowy zestaw funkcji testowych, ale także obsługuje różne strategie testowania. Aby w pełni wykorzystać możliwości Cypress, zapoznaj się z jego oficjalną dokumentacją i odkryj znacznie więcej możliwości testowania.