Configurar marco de trabajo de pruebas de Jest

Objetivos de aprendizaje

Después de completar esta unidad, podrá:

Describir el marco de trabajo de pruebas de Jest.
Describir la función de Node.js y npm.
Instalar Node.js y npm.
Instalar el módulo @salesforce/sfdx-lwc-jest de JavaScript en un proyecto de Salesforce DX.

Antes de comenzar

Para completar este módulo, necesita Salesforce CLI, Visual Studio Code y Salesforce Extensions for Visual Studio Code instalados y actualizados. Para cumplir con estos requisitos previos, le recomendamos completar los proyectos Inicio rápido: Salesforce DX, Inicio rápido: Visual Studio Code para el desarrollo de Salesforce e Inicio rápido: Componentes web Lightning antes de continuar.

Estamos utilizando un enfoque de desarrollo dirigido por pruebas (TDD), donde redactaremos la prueba de Jest antes de redactar el componente que prueba. Debido a esto, cada prueba fallará inicialmente. Luego actualizaremos el componente para que supere la prueba de Jest.

Crear un proyecto de Salesforce DX

El primer paso antes de la prueba es crear un proyecto de Salesforce DX para almacenar sus componentes web Lightning y pruebas de Jest.

En Visual Studio Code, abra la paleta de comandos. Para ello, pulse Ctrl+Mayús+P (Windows) o Cmd+Mayús+P (macOS).
Ingrese sfdx.
Seleccione SFDX: Crear proyecto. Si no ve esta opción, complete los requisitos previos desde la primera unidad de este módulo antes de continuar.
Seleccione Estándar.
Ingrese test-lwc como el nombre de proyecto.
Pulse Entrar.
Seleccione una carpeta para almacenar el proyecto.
Haga clic en Crear proyecto y espere a que se abra la nueva ventana de Visual Studio Code.
Haga clic en Ver, luego seleccione Terminal. Esto abre una ventana de terminal dentro de Visual Studio Code. La terminal toma como valor predeterminado el directorio de nivel superior del proyecto. Necesita que, más adelante, la terminal ejecute comandos en el directorio de trabajo de este proyecto.

¿Qué son Node.js y npm?

Node.js es un tiempo de ejecución de JavaScript creado en el motor JavaScript V8 de Chrome y es un gestor de paquetes para la distribución de módulos de código reutilizables. En el universo de Node.js y npm, estos módulos de código reutilizables se conocen como módulos de Nodo. En terminología de Salesforce, un módulo de Nodo (código reutilizable que se puede distribuir fácilmente a múltiples proyectos) es similar a paquetes desbloqueados.

Node.js y npm son herramientas populares en la caja de herramientas de un desarrollador de JavaScript moderno. Obtenga más información acerca del JavaScript moderno en la ruta Aprender a trabajar con JavaScript.

Instalar Node.js y npm

Jest es un módulo de Nodo, de modo que para utilizarlo, necesita instalar Nodo y npm. Hagámoslo ahora.

Instale Node.js desde https://nodejs.org/en/download/. Recomendamos el uso de la versión LTS (compatibilidad a largo plazo).
Confirme que Node.js está instalado. En la terminal de Visual Studio Code que abrimos anteriormente, ingrese el siguiente comando.
```
node --version
```
Debería ver un resultado similar a v16.13.0 o una versión posterior.
Cuando instala Node.js, npm también se instala automáticamente.
En una terminal, ingrese el siguiente comando.
```
npm --version
```
Debería ver un resultado similar a 8.1.0 o una versión posterior. Es aconsejable mantener la herramienta npm actualizada.

Es posible que tenga que actualizar npm, de modo que visite la documentación de npmjs para obtener más detalles acerca de la actualización de npm para diferentes sistemas operativos.

¿Qué es Jest?

Jest es una potente herramienta con muchas funciones para redactar pruebas JavaScript. Jest puede recopilar información de cobertura de código y admite la simulación para ayudar a aislar pruebas de dependencias complejas. Las pruebas de Jest no se ejecutan en un navegador ni se conectan a una organización, de modo que se ejecutan de forma rápida. Utilice Jest para redactar pruebas unitarias para todos sus componentes web Lightning. Para ejecutar pruebas de Jest para componentes web Lightning, necesita el módulo Nodo @salesforce/sfdx-lwc-jest en su proyecto de Salesforce DX.

Las pruebas de Jest funcionan solo con componentes web Lightning en proyectos de Salesforce DX, no funcionan con componentes Aura. Para componentes Aura, consulte Prueba de componentes con Lightning Testing Service.

Instalar el módulo Nodo sfdx-lwc-jest

El módulo Nodo @salesforce/sfdx-lwc-jest le permite redactar, ejecutar y depurar pruebas de Jest para Componentes web Lightning. La CLI de Salesforce facilita la tarea de instalar Jest y sus dependencias en el proyecto.

Ejecute el siguiente comando desde la línea de comandos para confirmar que la CLI se instaló correctamente y con la versión más reciente.
```
sf update
```
Debería ver un resultado similar a cli:Updating CLI... (Cli: Actualizando la CLI…).
En la terminal de Visual Studio Code, ejecute el siguiente comando en el directorio de nivel superior de su proyecto de Salesforce DX:
```
sf force lightning lwc test setup
```
Esto instala npm y @salesforce/sfdx-lwc-jest en el proyecto. Los resultados deberían tener un aspecto similar a este:

Si recibe el mensaje de error “No se encontró ninguna versión que coincida con prettier-plugin-apex@^1.10.1”, actualice el archivo package.json devDependencies prettier-plugin-apex a ^1.10.0.

Puede que observe que el proceso encuentra ciertas vulnerabilidades. Para nuestros fines está bien. Estas no son las vulnerabilidades que está buscando.

Para otras formas de instalar el módulo Nodo de Jest, Salesforce hace disponible el módulo Nodo @salesforce/sfdx-lwc-jest como un paquete de JavaScript en npm en https://www.npmjs.com/package/@salesforce/sfdx-lwc-jest y como un proyecto de código abierto en GitHub en https://github.com/salesforce/sfdx-lwc-jest.
Ejecute estos comandos de npm en el directorio de nivel superior de su proyecto de Salesforce DX:
npm install
A continuación:
npm install @salesforce/sfdx-lwc-jest --save-dev

Ejecutar pruebas de Jest

Excelente, configuró su proyecto de Salesforce DX para poder ejecutar las pruebas de Jest que redactará más adelante en este módulo. Existen varias formas de ejecutar las pruebas de Jest ahora que todo está configurado. Puede llamar la secuencia de comandos directamente, utilizar comandos de npm o puede utilizar clics en Visual Studio Code. Puede ejecutar una sola prueba o todas las pruebas en un archivo o proyecto. Puede incluso ejecutar pruebas automáticamente cuando cambia el código que la prueba cubre.

Veamos las diferentes maneras en que puede ejecutar pruebas de Jest.

El comando Nodo sfdx-lwc-jest

Puede ejecutar la secuencia de comandos directamente desde donde estaba instalada en el proyecto utilizando el siguiente comando de Nodo.

En la terminal de Visual Studio Code, en el directorio de nivel superior del proyecto de Salesforce DX, ingrese el siguiente comando.
```
node node_modules/@salesforce/sfdx-lwc-jest/bin/sfdx-lwc-jest
```
No hay pruebas de Jest aún, de modo que debe ver resultados como No tests found, exiting with code 1.
Si recibe un error “Invalid sourceApiVersion” (sourceApiVersion no válida) se debe a una Extensión de VS Code actualizada con la versión más reciente de Salesforce.
error Invalid sourceApiVersion found in sfdx-project.json.Expected 51.0, found 52.0 (Se encontró el error sourceApiVersion no válida en sfdx-project.json. Se esperaba 51.0, se encontró 52.0)

En Visual Studio Code, en el directorio de nivel superior, abra sfdx-project.json.

Actualice la línea de código con “sourceApiVersion” a la versión esperada del mensaje de error que recibió.
"sourceApiVersion": "51.0"

Guarde el archivo.

Es un buen comienzo, pero veamos cómo lo hacemos aún mejor con automatización.

Automatizar secuencias de comandos de prueba con Package.json y npm

Un objetivo de tener pruebas unitarias es alentar los desarrolladores a redactarlas y ejecutarlas como parte de su proceso de desarrollo e integración continua de modo que se identifiquen y se solucionen fallos cuanto antes. Tener que recordar y redactar comandos largos como el anterior una y otra vez es contraproducente para su objetivo. Aquí es donde entra en juego la automatización.

npm tiene cierta flexibilidad de automatización de secuencias de comandos sin configuración. La ejecución de la instalación antes agregó una serie de opciones a la propiedad scripts del archivo package.json en la raíz de su proyecto.

{
  "name": "test-lwc",
  ...  "scripts": {
    ...
    "test:unit": "sfdx-lwc-jest",
    "test:unit:watch": "sfdx-lwc-jest --watch",
    "test:unit:debug": "sfdx-lwc-jest --debug",
    "test:unit:coverage": "sfdx-lwc-jest --coverage",
    ...
  },
  ...}

Si desea ejecutar todas las pruebas para su proyecto, ejecute este comando npm desde el directorio base de su proyecto.

npm run test:unit

Si desea ejecutar pruebas en un directorio específico, el uso del comando anterior en un directorio específico ejecutará solo las pruebas en ese directorio. Esto le permite aislar lo que está probando.

Ejecutar pruebas de forma continua durante el desarrollo

Para esta opción, Node se apoya en Git para “ver” el código. Para utilizar esta opción, asegúrese de tener Git inicializado para su proyecto. Para ejecutar todas las pruebas para un solo componente cada vez que guarda cambios, cambie directorios en el directorio de componentes y ejecute el comando npm a continuación que utiliza sfdx-lwc-jest con el parámetro --watch. Como mencionamos anteriormente, también puede ejecutar esto desde la base del proyecto y hacer que se ejecuten todas las pruebas en el proyecto para cada cambio.

npm run test:unit:watch

Jest ahora ve todos los archivos de componente para actualizaciones y ejecuta todas las pruebas relevantes cada vez que detecta un cambio.

Ejecutar pruebas en modo de depuración de Jest

Ejecutar pruebas de Jest en modo de depuración es útil si quiere revisar sus pruebas y código de aplicación para averiguar por qué estos no se comportan según lo esperado. Puede depurar las pruebas de Jest con las siguientes herramientas.

Paquete de extensiones de Salesforce para Visual Studio Code
Herramientas para desarrolladores de Chrome
Configuración avanzada del depurador de Visual Studio Code

El paquete de extensiones de Salesforce para Visual Studio Code proporciona la opción más sencilla y directa, mientras que Chrome DevTools satisface las necesidades de los desarrolladores web experimentados. Además, la configuración avanzada para el depurador de VS Code le permite trabajar con diferentes depuradores y escenarios de depuración. La configuración avanzada ofrece la opción más flexible para depurar sus pruebas de Jest.

Para obtener más información, consulte Depurar pruebas de Jest para componentes web Lightning, o, para obtener información acerca de la resolución de problemas de Jest, consulte Jest: Resolución de problemas.

Ejecutar pruebas y Mostrar cobertura de código

Para ver la cobertura de código de las pruebas, utilice la opción --coverage a continuación.

npm run test:unit:coverage

Ejecutar pruebas con clics en Visual Studio Code

Las extensiones de Salesforce Visual Studio Code proporcionan mucho control y comentarios visuales para la ejecución de pruebas de Jest. Le proporciona opciones para ejecutar una, múltiples o todas las pruebas. También le proporciona la capacidad de utilizar la opción --watch en un archivo ya que Git está preinstalado en Visual Studio Code.

Haga clic en el icono de vaso de laboratorio de pruebas para abrir la barra lateral Prueba. Si no ve le icono, es posible que tenga que crear un nuevo proyecto de SFDX. En la barra lateral Prueba, existe una sección Pruebas de LWC que muestra cualquier prueba de Jest que está en el proyecto. Este es el aspecto de la barra lateral de prueba con pruebas en su proyecto.

Pruebas de LWC en barra lateral Prueba en el proyecto test-lwc.

Haga clic en el botón de reproducción para ejecutar una prueba o múltiples pruebas en un proyecto. Pase su cursor sobre la prueba individual o directorio para mostrar el botón de reproducción. Cuando se ejecuta una prueba, los resultados se muestran en la terminal. Los resultados también se indican por color en la barra lateral. Verde significa aprobación. Azul indica que no se ejecuta, naranja muestra una prueba omitida y rojo indica prueba fallida. Hacer clic en la prueba en la barra lateral abre el archivo y le lleva directamente a esa prueba.

Haga clic en el icono de actualización para borrar los resultados de prueba.

También existen controles directos en la vista de archivo de prueba.

Vista de archivo de prueba en Visual Studio Code.

Haga clic en el botón de reproducción en la barra de herramientas principal para ejecutar todas las pruebas en el archivo. También puede hacer clic en Ejecutar prueba antes de cada prueba en el archivo para ejecutar esa prueba específica.

Para ejecutar todas las pruebas en el archivo cada vez que guarda cambios, haga clic en el icono de visualización en la barra de herramientas principal. Es una excelente opción para que utilice cuando está trabajando en pruebas en el archivo.

¡Uau! Cuánta información.

Bien, redactemos algunas pruebas.