react-web
Umiejętność do tworzenia komponentów React z testami napisanymi na początek
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Skill do pracy z komponentami React, hookami, React Query i Zustand. Wymusza podejście test-first development — testy piszesz przed kodem implementacyjnym. Obejmuje strukturę projektów TypeScript, wzorce testowania za pomocą React Testing Library oraz best practices dla stron i komponentów. Załaduj razem z base.md i typescript.md.
Jak używać
Załaduj skill razem z plikami base.md i typescript.md, aby uzyskać pełny kontekst TypeScript i podstawowy setup.
Przed napisaniem komponentu utwórz plik testowy z rozszerzeniem .test.tsx — zdefiniuj tam wszystkie oczekiwane zachowania komponentu za pomocą React Testing Library (render, screen, fireEvent).
Uruchom testy poleceniem npm test — powinny się nie powieść, bo kod implementacyjny jeszcze nie istnieje. To potwierdza, że test jest poprawnie napisany.
Napisz minimalny kod komponentu w pliku .tsx, wystarczający do przejścia testów. Nie dodawaj funkcjonalności, którą testy nie wymagają.
Ponownie uruchom testy — powinny przejść. Jeśli nie, popraw implementację, aż wszystkie testy będą zielone.
Po zatwierdzeniu logiki dodaj style w pliku .module.css lub wybranym systemie stylowania. Testy logiki już gwarantują, że komponent działa prawidłowo.