Komponenty LWC - Jak testować metody klas komponentów w izolacji?

Dec 04 2020

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

3 TrevorBliss Dec 04 2020 at 03:05

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.

1 MatthewSouther Dec 04 2020 at 07:08

W jednym szczególnie ciężkim LWC wyciągnąłem logikę inną niż DOM do osobnego helper.jspliku 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.