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 av16.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 a8.1.0
o una versión posterior. Es aconsejable mantener la herramienta npm actualizada.
¿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.
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 acli: 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:
Puede que observe que el proceso encuentra ciertas vulnerabilidades. Para nuestros fines está bien. Estas no son las vulnerabilidades que está buscando.
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 comoNo tests found, exiting with code 1
.
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.
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.
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.
Recursos
- Guías de desarrollador: Probar componentes web Lightning
- Blog de Salesforce: Prueba unitaria de componentes web Lightning con Jest
- Salesforce Extensions for VS Code: Probar componentes web Lightning
- Sitio externo: Node.js: Descargas
- Sitio externo: npm: @salesforce/sfdx-lwc-jest
- Sitio externo: npm: Uso de un package.json
- Sitio externo: npm: package.json
- Sitio externo: Jest: Información general
- Sitio externo: Jest: Configuración
- Sitio externo: Jest: Resolución de problemas
- Sitio externo: Wikipedia: Desarrollo dirigido por pruebas