Komponenty LWC - Jak testować metody klas komponentów w izolacji?
Czy można przetestować metody w klasie, która rozszerza LightningElement
(np. Komponent LWC) w izolacji?
Innymi słowy, myślę, że efektywniejsze byłoby po prostu utworzenie instancji klasy komponentów przy użyciu, new MyComponent()
a następnie przetestowanie metod instancji. Innymi słowy, standardowe zwykłe testy jednostkowe JavaScript, a nie testy na poziomie DOM.
Nie chodzi o to, że nie widzę wartości w testach na poziomie DOM, ale wiele logiki w komponentach LWC nie jest związanych z DOM, a testowanie ich za pomocą DOM jest uciążliwe.
Czy jest to kwestia umieszczenia logiki innej niż DOM w klasie, która jest następnie importowana do komponentu?
Dzięki.
Odpowiedzi
Jak wspomniano na końcu postu, najlepiej byłoby wyciągnąć tę logikę do oddzielnego pliku i zaimportować ją do swojego komponentu, a także bezpośrednio do testu jednostkowego.
Dobrym przykładem tego w projekcie lwc-recpies może być biblioteka mortgage.js, która ma własne testy (bez udziału komponentu) i jest importowana do komponentu miscSharedJavascript w celu użycia. Testy miscSharedJavascript mogą następnie zdecydować się na wyśmiewanie wezwania do kredytu hipotecznego, jeśli chcą.
Należy również zauważyć, że w powyższym przykładzie logika wyciągnięta z komponentu nie musi znajdować się w oddzielnym folderze i może być lokalnym plikiem JavaScript w pakiecie komponentów.
W jednym szczególnie ciężkim LWC wyciągnąłem logikę inną niż DOM do osobnego helper.js
pliku w pakiecie komponentów, który przetestowałem bezpośrednio z Jest.
Ta odpowiedź StackExchange opisuje, gdzie umieściłem plik i jak złożyłem go do głównej klasy komponentów.