Компоненты LWC - как изолированно тестировать методы класса компонентов?

Question

Можно ли тестировать методы в расширяемом классе LightningElement(например, в компоненте LWC) изолированно?

Другими словами, я думаю, что было бы эффективнее просто создать экземпляр класса компонента, используя, new MyComponent()а затем протестировать методы экземпляра. Другими словами, стандартные простые модульные тесты JavaScript, а не тесты уровня DOM.

Дело не в том, что я не вижу значения в тестах уровня DOM, но большая часть логики в компонентах LWC не связана с DOM, и тестировать ее с помощью DOM обременительно.

Нужно ли помещать в класс логику, не относящуюся к DOM, которая затем импортируется в компонент?

Спасибо.

Answer 1

Как упоминалось в конце сообщения, лучше всего вынести эту логику в отдельный файл и импортировать ее в свой компонент, а также непосредственно в модульный тест.

Хорошим примером этого в проекте lwc-recpies может служить библиотека mortgage.js, которая имеет собственные тесты (без задействованных компонентов) и импортируется в компонент miscSharedJavascript для использования. Затем тесты miscSharedJavascript могут при желании имитировать ипотечный вызов.

Также обратите внимание, что в приведенном выше примере логика, извлеченная из компонента, не обязательно должна находиться в отдельной папке и может быть локальным файлом Javascript в наборе компонентов.

Answer 2

В одном особенно тяжелом LWC я вытащил логику, не относящуюся к DOM, в отдельный helper.jsфайл в комплекте компонентов, который я протестировал непосредственно с помощью Jest.

Этот ответ StackExchange описывает, где я поместил файл и как я сложил его в основной класс компонента.