Componentes de LWC: ¿cómo probar los métodos de clase de componentes de forma aislada?
¿Es posible probar los métodos en una clase que se extiende LightningElement(por ejemplo, un componente LWC) de forma aislada?
En otras palabras, creo que sería más efectivo crear una instancia de la clase de componente usando new MyComponent()y luego probar los métodos de instancia. En otras palabras, pruebas unitarias de JavaScript sin formato estándar, en lugar de pruebas de nivel DOM.
No es que no vea el valor en las pruebas de nivel DOM, pero mucha lógica en los componentes de LWC no está relacionada con DOM, y es engorroso probarlo a través del DOM.
¿Se trata de poner cualquier lógica que no sea DOM en una clase que luego se importa al componente?
Gracias.
Respuestas
Como se mencionó al final de la publicación, su mejor opción sería extraer esa lógica en un archivo separado e importarla a su componente, así como directamente a una prueba unitaria.
Un buen ejemplo de eso en el proyecto lwc-recpies sería la biblioteca hipoteca.js que tiene sus propias pruebas (ningún componente involucrado) y se importa al componente miscSharedJavascript para su uso. Las pruebas de miscSharedJavascript pueden optar por simular la llamada de hipoteca si así lo desean.
También tenga en cuenta que con el ejemplo anterior la lógica extraída del componente no necesita estar en una carpeta separada y puede ser un archivo Javascript local en el paquete de componentes.
En un LWC particularmente pesado, saqué la lógica que no es DOM en un helper.jsarchivo separado en el paquete de componentes, que probé directamente con Jest.
Esta respuesta de StackExchange describe dónde coloqué el archivo y cómo lo plegué en la clase de componente principal.