react-testing

Umiejętność do testowania komponentów React, hooków, kontekstu i formularzy. Skupia się na Vitest Browser Mode z vitest-browser-react, które uruchamia testy w rzeczywistej przeglądarce, dając dokładne renderowanie i obsługę zdarzeń jak w produkcji. Zawiera wzorce dla @testing-library/react. Załaduj tę umiejętność, gdy testujesz aplikacje React — dla ogólnych wzorców UI testowania zobacz front-end-testing, a dla TDD workflow — skill tdd.

1. Zainstaluj wymagane pakiety: npm install -D vitest @vitest/browser-playwright vitest-browser-react @vitejs/plugin-react. 2. Utwórz plik konfiguracyjny vitest.config.ts w katalogu projektu. Zdefiniuj konfigurację z pluginem react, włącz browser mode z providerem playwright, ustaw headless na true i wybierz przeglądarkę chromium. 3. Utwórz test dla swojego komponentu, importując render z vitest-browser-react oraz expect i test z vitest. 4. Użyj await render() aby wyrenderować komponent — render zwraca screen scoped do komponentu. 5. Napisz asercje używając expect.element() do auto-retry assertions, na przykład sprawdzając czy tekst jest widoczny za pomocą getByText(). Pamiętaj, że render() jest asynchroniczny, więc zawsze używaj await, a cleanup odbywa się przed każdym testem automatycznie.