Skip to main content
Rejoignez-nous lors de l'Ă©vĂ©nement TDX Ă  San Francisco ou sur Salesforce+ les 5 et 6 mars pour la confĂ©rence des dĂ©veloppeurs Ă  l'ère des agents IA. Inscrivez-vous dès maintenant.

Simulation d’autres composants

Objectifs de formation

Une fois cette unitĂ© terminĂ©e, vous pourrez :

  • DĂ©crire les stubs fournis par le package sfdx-lwc-jest
  • Comprendre comment remplacer la configuration Jest
  • Tester les composants en dehors de votre environnement de dĂ©veloppement
  • CrĂ©er des stubs pour les composants externes

Création de composants de base fictifs

Le package sfdx-lwc-jest nous permet d’exĂ©cuter Jest dans les composants Web Lightning. Il met en place toutes les configurations Jest nĂ©cessaires pour exĂ©cuter des tests sans aucune modification supplĂ©mentaire. Nous l’avons beaucoup utilisĂ© dans les modules prĂ©cĂ©dents. Ce package comprend un ensemble de stubs (programmes qui simulent les composants dont dĂ©pend un module faisant l’objet de tests) pour tous les composants de l’espace de noms Lightning, y compris tous les composants de base Lightning. Cela nous permet d’exĂ©cuter les tests dans notre environnement sans Ăªtre dans un environnement Lightning. Les stubs sont installĂ©s dans le rĂ©pertoire src/lightning-stubs du rĂ©pertoire node-modules/@salesforce/sfdx-lwc-jest.

RĂ©pertoire lightning-stubs dans le projet test-lwc.

Il peut arriver que vous deviez remplacer les stubs fournis par défaut. Pour ce faire, il est nécessaire de remplacer les configurations Jest, puis de créer des stubs personnalisés. Passons en revue les étapes à suivre pour lightning-button.

Commencez par configurer les rĂ©pertoires pour les stubs personnalisĂ©s dans Visual Studio Code.

  1. Cliquez avec le bouton droit de la souris sur le répertoire force-app et sélectionnez Nouveau dossier.
  2. Saisissez test pour nommer le nouveau répertoire.
  3. Cliquez avec le bouton droit de la souris sur le nouveau répertoire test et sélectionnez Nouveau dossier.
  4. Saisissez jest-mocks pour nommer le nouveau répertoire.
  5. Cliquez avec le bouton droit de la souris sur le nouveau répertoire jest-mocks et sélectionnez Nouveau dossier.
  6. Saisissez lightning pour nommer le nouveau répertoire.

Il s’agit de la racine des stubs pour les composants de base Lightning.

Ensuite, remplacez la configuration Jest en mettant Ă  jour le fichier nommĂ© jest.config.js situĂ© Ă  la racine de votre projet Salesforce DX.

  1. Ouvrez le fichier jest.config.js.
  2. Saisissez le bloc de code suivant après la ligne …jestConfig :
      moduleNameMapper: {
        '^lightning/button$': '<rootDir>/force-app/test/jest-mocks/lightning/button'
      },

    PrĂªtez attention Ă  l’élĂ©ment moduleNameMapper. Cet Ă©lĂ©ment indique Ă  Jest oĂ¹ trouver le stub de lightning-button. Le premier tiret est converti en une barre oblique et le reste du nom passe d’une convention oĂ¹ les mots sont sĂ©parĂ©s par des tirets Ă  une casse mixte. Une barre oblique est utilisĂ©e, car le rĂ©solveur de module traite tout ce qui se trouve avant le premier tiret comme l’espace de noms. Ici, <rootDir> correspond Ă  la racine de l’espace de travail Salesforce DX.

    Votre fichier doit se prĂ©senter comme suit :

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

Ajoutons maintenant le stub button au répertoire lightning que nous venons de créer.

  1. Cliquez avec le bouton droit de la souris sur le répertoire lightning que nous avons créé au cours des dernières étapes et sélectionnez Nouveau fichier.
  2. Saisissez button.html pour nommer le nouveau fichier.
  3. Saisissez le bloc de code suivant dans le nouveau fichier :
    <template></template>
  4. Enregistrez le fichier.
  5. Cliquez avec le bouton droit de la souris sur le répertoire lightning et sélectionnez Nouveau fichier.
  6. Saisissez button.js pour nommer le nouveau fichier.
  7. Saisissez le bloc de code suivant dans le nouveau fichier :
    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. Enregistrez le fichier.

Ces deux fichiers sont des copies des fichiers lightning-button du dossier lightning-stubs. Ils permettent de remplacer l’élément lightning-button de base pour les tests Jest si nécessaire.

Nous pouvons maintenant remplacer les stubs par dĂ©faut fournis par sfdx-lwc-jest. Qu’en est-il des composants issus d’autres espaces de noms ? Nous pouvons traiter ces cas avec quelques ajustements seulement. Abordons-les maintenant.

Création d’autres composants fictifs

Commençons par crĂ©er des composants fictifs avec un espace de noms diffĂ©rent. Pour ce faire, vous devez configurer un composant Web Lightning avec un test Jest qui Ă©choue. Nous simulerons ensuite un correctif.

  1. CrĂ©ez un composant Web Lightning dans Visual Studio Code.
  2. DĂ©finissez le nom sur otherComponents.

Ajoutons maintenant un composant avec un espace de noms différent au LWC.

  1. Ouvrez le fichier otherComponents.html et ajoutez le code suivant entre les balises « template Â» :
    <thunder-hammer-button onclick={makeNoise}></thunder-hammer-button>
  2. Enregistrez le fichier et exécutez le test.
  3. Le test Ă©choue pour une nouvelle raison :
    Test suite failed to run
        
      Cannot find module 'thunder/hammerButton' from 'otherComponents.html'

puisque le composant <thunder-hammer-button> provient d’un autre espace de noms, et non du répertoire lwc local, vous devez créer un stub et mettre à jour la configuration Jest pour mapper le nom de ces composants au fichier fictif.

Vous devez d’abord ajouter un répertoire Thunder pour représenter l’espace de noms. Vous ajoutez ensuite les fichiers pour le remplacer.

  1. Cliquez avec le bouton droit de la souris sur le répertoire jest-mocks dans le répertoire force-app/test/ et sélectionnez Nouveau dossier.
  2. Saisissez thunder pour nommer le nouveau répertoire.
  3. Cliquez avec le bouton droit de la souris sur le répertoire thunder et sélectionnez Nouveau fichier.
  4. Saisissez hammerButton.html pour nommer le nouveau fichier.
  5. Saisissez le bloc de code suivant dans le nouveau fichier :
    <template></template>
  6. Enregistrez le fichier.
  7. Cliquez avec le bouton droit de la souris sur le nouveau répertoire thunder et sélectionnez Nouveau fichier.
  8. Saisissez hammerButton.js pour nommer le nouveau fichier.
  9. Saisissez le bloc de code suivant dans le nouveau fichier :
    import { LightningElement, api } from 'lwc';
        
    export default class HammerButton extends LightningElement {
      @api label;
      // any other implementation you may want to expose here
    }
  10. Enregistrez le fichier et exécutez le test.
  11. Le test Ă©choue. Nous devons mettre Ă  jour le fichier de configuration Jest.
  12. Ouvrez jest.config.js et ajoutez cette ligne juste en dessous de la ligne moduleNameMapper: { :
    '^thunder/hammerButton$': '<rootDir>/force-app/test/jest-mocks/thunder/hammerButton',
  13. Enregistrez le fichier et exécutez le test.
  14. Impeccable ! Le test rĂ©ussit.

Il arrive que le LWC avec lequel vous travaillez importe un autre LWC qui ne se trouve pas dans le rĂ©pertoire LWC local de votre projet Salesforce DX, Sans stub, ils feront Ă©chouer Jest. Testons ce cas.

  1. Ouvrez le fichier otherComponents.html et ajoutez le code suivant après la première balise « template Â» :
    <c-display-panel errors={error} notes={messages}></c-display-panel>
  2. Enregistrez le fichier et exécutez le test.
  3. Le test Ă©choue, car il ne trouve pas le composant.

Vous pouvez résoudre ce problème à l’aide d’un stub. Vous devez commencer par créer le stub, puis mettre à jour la configuration Jest.

  1. Cliquez avec le bouton droit de la souris sur le répertoire jest-mocks dans le répertoire force-app/test/ et sélectionnez Nouveau dossier.
  2. Saisissez c pour nommer le nouveau répertoire.
  3. Cliquez avec le bouton droit de la souris sur le répertoire c et sélectionnez Nouveau fichier.
  4. Saisissez displayPanel.html pour nommer le nouveau fichier.
  5. Saisissez le bloc de code suivant dans le nouveau fichier :
    <template></template>
  6. Enregistrez le fichier.
  7. Cliquez avec le bouton droit de la souris sur le nouveau répertoire c et sélectionnez Nouveau fichier.
  8. Saisissez displayPanel.js pour nommer le nouveau fichier.
  9. Saisissez le bloc de code suivant dans le nouveau fichier :
    import { LightningElement, api } from 'lwc';
        
    export default class DisplayPanel extends LightningElement {
      @api errors;
      @api notes;
      // any other implementation you may want to expose here
    }
    Notez qu’il existe un décorateur d’API pour chaque paramètre transmis à l’appel de composant.
  10. Enregistrez le fichier.
  11. Ouvrez jest.config.js et ajoutez cette ligne juste en dessous de la ligne moduleNameMapper: { :
    '^c/displayPanel$': '<rootDir>/force-app/test/jest-mocks/c/displayPanel',
  12. Enregistrez le fichier et exécutez le test.
  13. Le test réussit.

Bravo ! Vous Ăªtes maintenant prĂªt Ă  Ă©crire des tests pour tous vos composants Web Lightning. Vous Ăªtes Ă©galement capable de rĂ©aliser des implĂ©mentations de stubs aussi sophistiquĂ©es ou simples que vous le souhaitez.

Ressources

Partagez vos commentaires sur Trailhead dans l'aide Salesforce.

Nous aimerions connaître votre expérience avec Trailhead. Vous pouvez désormais accéder au nouveau formulaire de commentaires à tout moment depuis le site d'aide Salesforce.

En savoir plus Continuer Ă  partager vos commentaires