Simular otros componentes

Objetivos de aprendizaje

Después de completar esta unidad, podrá:

• Describir los códigos auxiliares proporcionados por el paquete sfdx-lwc-jest.
• Comprender cómo sustituir la configuración de Jest.
• Probar componentes fuera de su entorno de desarrollo.
• Crear códigos auxiliares para componentes externos.

Simulación de componentes base

El paquete sfdx-lwc-jest nos permite ejecutar Jest en componentes web Lightning. Configura todas las configuraciones de Jest necesarias para ejecutar pruebas sin ningún cambio adicional. Lo utilizamos mucho en los módulos anteriores. Este paquete incluye un conjunto de códigos auxiliares (programas que simulan de los que dependen componentes que un módulo sometido a pruebas) para todos los componentes en el espacio de nombres de Lightning. Esto incluye todos los componentes base Lightning. Esto nos permite ejecutar las pruebas en nuestro entorno sin estar en un entorno Lightning. Los códigos auxiliares están instalados en el directorio src/lightning-stubs en el directorio node-modules/@salesforce/sfdx-lwc-jest.

Puede haber veces que necesite sustituir los códigos auxiliares predeterminados proporcionados. Esto se realiza sustituyendo las configuraciones de Jest y luego creando códigos auxiliares personalizados. Vamos a revisar los pasos para hacer esto para lightning-button.

Comience por configurar los directorios para los códigos auxiliares personalizados en Visual Studio Code.

1. Haga clic con el botón derecho en el directorio force-app y seleccione Nueva carpeta.
2. Ingrese test para el nombre del nuevo directorio.
3. Haga clic con el botón derecho en el nuevo directorio test y seleccione Nueva carpeta.
4. Ingrese jest-mocks para el nombre del nuevo directorio.
5. Haga clic con el botón derecho en el nuevo directorio jest-mocks y seleccione Nueva carpeta.
6. Ingrese lightning para el nombre del nuevo directorio.

Esta es la raíz para códigos auxiliares de Componente base Lightning.

A continuación, actualice el archivo denominado jest.config.js en la raíz de su proyecto de Salesforce DX para sustituir la configuración de Jest.

1. Abra el archivo jest.config.js.
2. Introduzca el siguiente bloque de código después de la línea ...jestConfig,:

     moduleNameMapper: {
       '^lightning/button$': '<rootDir>/force-app/test/jest-mocks/lightning/button'
     },

   Preste atención a moduleNameMapper. Esto está indicando a Jest dónde encontrar el código auxiliar para lightning-button. El primer guión se convierte en una barra invertida y el resto del nombre del componente pasa de kebab a camel case. La razón para la barra invertida es porque el solucionador del módulo trata todo antes del primer guión como el espacio de nombres. Aquí, <rootDir> se asigna a la raíz del espacio de trabajo de Salesforce DX.

   Su archivo debería tener un aspecto similar a este:

   const { jestConfig } = require('@salesforce/sfdx-lwc-jest/config');
     
   module.exports = {
       ...jestConfig,
       moduleNameMapper: {
           '^lightning/button$': '/force-app/test/jest-mocks/lightning/button'
       },
       modulePathIgnorePatterns: ['/.localdevserver']
   };
     

3. Guarde el archivo.

Ahora agreguemos el código auxiliar button al directorio lightning que acabamos de crear.

1. Haga clic con el botón derecho en el directorio lightning que creamos en los últimos pasos y seleccione Nuevo archivo.
2. Ingrese button.html para el nombre del nuevo archivo.
3. Ingrese el siguiente bloque de código en el nuevo archivo:

   <template></template>

4. Guarde el archivo.
5. Haga clic con el botón derecho en el directorio lightning y seleccione Nuevo archivo.
6. Ingrese button.js para el nombre del nuevo archivo.
7. Ingrese el siguiente bloque de código en el nuevo archivo:

   import { LightningElement, api } from 'lwc';
       
   export default class Button extends LightningElement {
     @api disabled;
     @api iconName;
     @api iconPosition;
     @api label;
     @api name;
     @api type;
     @api value;
     @api variant;
   }

8. Guarde el archivo.

Estos dos archivos son copias de los archivos lightning-button desde la carpeta lightning-stubs. Permiten la sustitución del lightning-button base para pruebas de Jest si es necesario.

Ahora podemos sustituir los códigos auxiliares predeterminados proporcionados por sfdx-lwc-jest. ¿Qué hay de los componentes de otros espacios de nombres? Podemos gestionar estos casos con solo un par de ajustes. Exploremos eso a continuación.

Simulación de otros componentes

Comencemos por simular componentes con un espacio de nombres diferente. Para hacer esto, configure un componente web Lightning con una prueba de Jest en la que se produce un error y, luego, simule una solución.

1. Cree un nuevo componente web Lightning en Visual Studio Code.
2. Establezca el nombre como otherComponents.

Ahora agregue un componente con un espacio de nombres diferente al componente web Lightning (LWC).

1. Abra el archivo otherComponents.html y agregue este código entre las etiquetas de plantilla:

   <thunder-hammer-button onclick={makeNoise}></thunder-hammer-button>

2. Guarde el archivo y ejecute la prueba.
3. La prueba falla por una nueva razón:

   Test suite failed to run
       
     Cannot find module 'thunder/hammerButton' from 'otherComponents.html'

Como el componente <thunder-hammer-button> es de otro espacio de nombres, y no está en el directorio local lwc, debe crear un código auxiliar y actualizar la configuración de Jest para asignar el nombre de estos componentes al archivo simulado.

Primero debe agregar un directorio de thunder para representar el espacio de nombres. A continuación agregue los archivos para simularlos.

1. Haga clic con el botón derecho en el directorio jest-mocks en el directorio force-app/test/ y seleccione Nueva carpeta.
2. Ingrese thunder para el nombre del nuevo directorio.
3. Haga clic con el botón derecho en el directorio thunder y seleccione Nuevo archivo.
4. Ingrese hammerButton.html para el nombre del nuevo archivo.
5. Ingrese el siguiente bloque de código en el nuevo archivo:

   <template></template>

6. Guarde el archivo.
7. Haga clic con el botón derecho en el nuevo directorio thunder y seleccione Nuevo archivo.
8. Ingrese hammerButton.js para el nombre del nuevo archivo.
9. Ingrese el siguiente bloque de código en el nuevo archivo:

   import { LightningElement, api } from 'lwc';
       
   export default class HammerButton extends LightningElement {
     @api label;
     // any other implementation you may want to expose here
   }

10. Guarde el archivo y ejecute la prueba.
11. La prueba falla. Debemos actualizar el archivo de configuración de Jest.
12. Abra jest.config.js y agregue esta línea justo debajo de la línea moduleNameMapper:{:

    '^thunder/hammerButton$': '<rootDir>/force-app/test/jest-mocks/thunder/hammerButton',

13. Guarde el archivo y ejecute la prueba.
14. Impresionante. La prueba pasa.

Habrá veces en que el LWC con el que está trabajando importe otro LWC que no está en el directorio local de LWC de su proyecto de Salesforce DX. Sin un código auxiliar causarán un fallo en Jest. Probemos eso.

1. Abra el archivo otherComponents.html y agregue este código tras la primera etiqueta de plantilla:

   <c-display-panel errors={error} notes={messages}></c-display-panel>

2. Guarde el archivo y ejecute la prueba.
3. Se produce un error en la prueba, ya que no se encuentra el componente.

Puede solucionar eso con un código auxiliar. Comienza creando el código auxiliar y luego actualizando la configuración de Jest.

1. Haga clic con el botón derecho en el directorio jest-mocks en el directorio force-app/test/ y seleccione Nueva carpeta.
2. Ingrese c para el nombre del nuevo directorio.
3. Haga clic con el botón derecho en el directorio c y seleccione Nuevo archivo.
4. Ingrese displayPanel.html para el nombre del nuevo archivo.
5. Ingrese el siguiente bloque de código en el nuevo archivo:

   <template></template>

6. Guarde el archivo.
7. Haga clic con el botón derecho en el nuevo directorio c y seleccione Nuevo archivo.
8. Ingrese displayPanel.js para el nombre del nuevo archivo.
9. Ingrese el siguiente bloque de código en el nuevo archivo:

   import { LightningElement, api } from 'lwc';
       
   export default class DisplayPanel extends LightningElement {
     @api errors;
     @api notes;
     // any other implementation you may want to expose here
   }

   Observe que existe un decorator de api para cada parámetro pasado en la llamada de componente.
10. Guarde el archivo.
11. Abra jest.config.js y agregue esta línea justo debajo de la línea moduleNameMapper:{:

    '^c/displayPanel$': '<rootDir>/force-app/test/jest-mocks/c/displayPanel',

12. Guarde el archivo y ejecute la prueba.
13. La prueba pasa.

¡Bien hecho! Ahora está equipado para redactar pruebas para todos sus componentes web Lightning. También tiene el poder de hacer que estas implementaciones de código auxiliar sean tan sofisticadas o tan sencillas como necesite.

Recursos

• Sitio externo: GitHub: salesforce/sfdx-lwc-jest: Resolución de componentes web Lightning externos
• Sitio externo: GitHub: trailheadapps/lwc-recipes