frontend-testing
Generate Vitest + React Testing Library tests for Dify frontend components, hooks, and utilities. Triggers on testing, spec files, coverage, Vitest, RTL, unit tests, integration tests, or write/review test requests.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Generate Vitest + React Testing Library tests for Dify frontend components, hooks, and utilities. Triggers on testing, spec files, coverage, Vitest, RTL, unit tests, integration tests, or write/review test requests.
How to use
Zainstaluj umiejętność w swoim środowisku Claude'a, wskazując repozytorium langgenius/dify. Upewnij się, że masz dostęp do pliku web/docs/test.md, który zawiera autorytywne wytyczne testowania dla projektu.
Przygotuj kontekst, podając Claude'owi ścieżkę do komponentu, hooka lub narzędzia, które chcesz przetestować. Możesz użyć polecenia pnpm analyze-component <ścieżka>, aby wygenerować szczegółową analizę złożoności kodu.
Poproś Claude'a o napisanie testów, na przykład: "Napisz testy dla tego komponentu" lub "Przejrzyj istniejące testy pod kątem kompletności". Umiejętność automatycznie rozpozna żądanie i zastosuje odpowiednie wzorce testowania.
Claude wygeneruje pliki spec z rozszerzeniem .spec.tsx w tym samym katalogu co testowany kod, używając Vitest i React Testing Library. Testy będą zawierać mockowanie HTTP za pomocą nock i obsługę timerów poprzez API vi.*.
Uruchom wygenerowane testy poleceniem pnpm test <ścieżka/do/pliku.spec.tsx> lub pnpm test:watch, aby śledzić zmiany w czasie rzeczywistym.
Sprawdź pokrycie kodu za pomocą pnpm test:coverage i popros Claude'a o uzupełnienie brakujących scenariuszy testowych, jeśli jest to konieczne.