y no volverser loco.

Esta es una guía paso a paso para configurar JEST en LWC OSS danndo contexto de conficguración.

Solución

Usando NPM, instalar los siguientes paquetes en su proyecto (recomendado en dev Dependencies)

• jest
• jest-environment-jsdom
• @lwc/jest-preset

Y crear un archivo jest.config.js en la raiz del proyecto con la siguiente información

const { defaults } = require('jest-config');
module.exports = {
preset:'@lwc/jest-preset',
moduleNameMapper: {
'^yourspacenamehere/(.+)$':'<rootDir>/$1/$1'
  }
};

Finalmente ejecutar sus pruebas y eso es todo.

Ahora si se esta utilizando otros recurso de LWC como por ejemplo lightning-base-components, se debe incluir el moduleNameMapper como

'lightning/(.*)':'<rootDir>/node_modules/lightning-base-components/src/lightning/$1/$1'

y adicionar en transformIgnorePatterns lo siguiente

['/node_modules/(?!lightning-base-components)']

El archivo final deberia de lucir de la siguiente forma

const { defaults } = require('jest-config');
module.exports = {
  preset: '@lwc/jest-preset',
  transformIgnorePatterns: ['/node_modules/(?!lightning-base-components)'],
  moduleNameMapper: {
    '^yourspacenamehere/(.+)$': '<rootDir>/$1/$1',
    'lightning/(.*)' : '<rootDir>/node_modules/lightning-base-components/src/lightning/$1/$1' 
  } 
};

Detalles de la solución

Si es curioso y quiere saber mas detalles de la solución, pues veamoslo en detalle

Acerca de LWS OSS

Es un framework de javascript para construir aplicaciones modernas, desarrollado por Salesforce y es usado principalmente en la plataforma de Salesforce. Salesforce decidió ofrecer el codigo como codigo abierto y esto da la posibilidad de crear aplicaciones sin relación alguna con la plataforma de Salesforce, para mas detalles visite https://lwc.dev/ 

Acerca de JEST

JEST es un framework de pruebas para javascript en el cual se crearn pruebas de unidad. Esta herramienta fue creada por facebook, es de codigo abierto y la herramienta recomendada para los proyectos salesforce. Para mas detalles visita https://jestjs.io/

Acerca de Node y NPM

Los desarrolladores web tuvieron que aprender javascript para ofrecer aplicaciones web interactivas, y un dia una herramienta fue creada para ejecutar javascript al lado del servidor (y en un computador sin utilizar un navegador web), por lo que despues de su creación fue inmediatamente popular y la herramienta favorita para los desarrolladores web, esta herramienta fue llamada Node, y dentro de Node tenemos NPM, el cual es un comando que permite reusar y compartir codigo entre desarrolladores, para mas información visita https://nodejs.org/

Acerca de los paquetes

Jest

Es la herramienta preferida de Salesforce para realizar pruebas de unidad cuando se refiere a LWC, es solo utilizada en la etapa de desarrollo por lo que se recomienda instalarla de la siguiente forma

> npm install jest –save-dev

jest-environment-jsdom

Permite a JEST ejecutar un ambiente DOM (como un navegador web) para realizar las pruebas de unidad correspondientes, como lo podra imaginar se utiliza solo en la etapa de desarrollo, por lo que forma recomendada de instalar es

> npm install jest-environment-jsdom –save-dev

@lwc/jest-preset

paquete creado por Salesforce el cual permite de un forma sencilla ejecutar LWC en JEST, tambien es utilizada unicamente en etapa de desarrollo, por lo que se recomienda instalarla con el siguiente comando

> npm install @lwc/jest-preset –save-dev

lightning-base-components

Paquete creado por salesforce, este contiene la libreria de componentes lightning. Este es el mismo usado en las orgs de Salesforce, si se quiere utilizar, es obligatorio incluir @salesforce-ux/design-system, el cual contiene SLDS (Salesforce Lightning Design System) utilizado para dar color, espacios, bordes y todo lo relacionado con estilos.

Para mas detalles referente a la configuración es instalación ver

• https://developer.salesforce.com/docs/platform/lwr/guide/lwr-slds.html
• https://developer.salesforce.com/docs/platform/lwr/guide/lwr-lwc.html

Acerca del archivo de configuración jest.config.js

Este archivo permite configurar JEST para que ejecute correctalmente las pruebas de unidad. El detalle de las posibles configuraciopnes se puede consultar en el siguiente enlace https://jestjs.io/docs/configuration

Hay muchas configuraciones, pero para nuestro proposito, solo nos enfocaremos en preset, transformIgnorePatterns, and moduleNameMapper.

Preset

podemos indicar todas las configuraciones dadas en el paquete @lwc/jest-preset, por esta razón adicionamos la siguiente linea

preset: '@lwc/jest-preset'

transformIgnorePatterns

Jest tiene una etapa de preparación antes de iniciar las pruebas, y algunos archivos podrian no estar soportados, en tal caso, obtendriamos un error durante el proceso, para mas información visite https://jestjs.io/docs/code-transformation

En nuestro caso en particular serian algunos archivos dentro del directorio de lightning-base-components, por esta razón evitamos la trasformación con la siguiente configuración

transformIgnorePatterns: ['/node_modules/(?!lightning-base-components)'],

moduleNameMapper

En esta configuración se debe incluir la ubicación de modulos LWC para permitirle a JEST resolver las referencias dentro del codigo, por esta razón incluimos las siguientes lineas para nuestros componentes y los componentes que vienen en la libreria de salesfor (lightning-base-components).

moduleNameMapper: {
'^yourspacenamehere/(.+)$': '<rootDir>/$1/$1',
'lightning/(.*)' : '<rootDir>/node_modules/lightning-base-components/src/lightning/$1/$1'
}

Conclusiones

Configurar JEST para LWC OSS puede ser algo tedioso, pero nos ayudara a ahorrar tiempo y evitar dolores de cabeza, como es bien sabido, las pruebas de unidad son una funcionalidad neceseria para garantizar la calidad en los proyectos de software.