Simulieren anderer Komponenten

Lernziele

Nachdem Sie diese Lektion abgeschlossen haben, sind Sie in der Lage, die folgenden Aufgaben auszuführen:

• Beschreiben der Stubs, die das Paket "sfdx-lwc-jest" bereitstellt
• Erläutern, wie die Jest-Konfiguration überschrieben wird
• Testen von Komponenten außerhalb Ihrer Entwicklungsumgebung
• Erstellen von Stubs für externe Komponenten

Simulieren von Basiskomponenten

Das Paket "sfdx-lwc-jest" ermöglicht uns, Jest für Lightning-Webkomponenten auszuführen. Es richtet alle Jest-Konfigurationen ein, sodass Tests ohne weitere Änderungen ausgeführt werden können. Wir haben dieses Paket in den vorhergehenden Modulen bereits ausgiebig genutzt. Dieses Paket enthält eine Reihe von Stubs (Programme, die Komponenten simulieren, von denen ein zu testendes Modul abhängt) für alle Komponenten im Lightning-Namespace. Dazu gehören alle Lightning-Basiskomponenten. So können wir die Tests in unserer Umgebung durchführen, während wir nicht in einer Lightning-Umgebung arbeiten. Die Stubs werden im Unterverzeichnis src/lightning-stubs des Verzeichnisses node-modules/@salesforce/sfdx-lwc-jest installiert.

Manchmal ist es notwendig, dass Sie die bereitgestellten Standard-Stubs überschreiben. Dazu überschreiben Sie die Jest-Konfigurationen und erstellen benutzerdefinierte Stubs. Gehen wir die einzelnen Schritte dieses Verfahrens anhand von "lightning-button" durch.

Richten Sie zunächst die Verzeichnisse für die benutzerdefinierten Stubs in Visual Studio Code ein.

1. Klicken Sie mit der rechten Maustaste auf das Verzeichnis force-app und wählen Sie New Folder aus.
2. Geben Sie als Namen des neuen Verzeichnisses test ein.
3. Klicken Sie mit der rechten Maustaste auf das neue Verzeichnis test und wählen Sie New Folder aus.
4. Geben Sie als Namen des neuen Verzeichnisses jest-mocks ein.
5. Klicken Sie mit der rechten Maustaste auf das Verzeichnis jest-mocks und wählen Sie New Folder aus.
6. Geben Sie als Namen des neuen Verzeichnisses lightning ein.

Das ist die Root-Ebene bei Stubs für Lightning-Basiskomponenten.

Als Nächstes überschreiben Sie die Jest-Konfiguration, indem Sie die Datei jest.config.js auf der Root-Ebene Ihres Salesforce DX-Projekts ändern.

1. Öffnen Sie die Datei jest.config.js.
2. Geben Sie den folgenden Codeblock nach der Zeile ...jestConfig, ein:

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

   Beachten Sie moduleNameMapper. Diese Angabe sagt Jest, wo der Stub für lightning-button zu finden ist. Der erste Gedankenstrich wird in einen Schrägstrich umgewandelt, und der Rest des Komponentennamens wechselt von der Kebab- in die Camel-Case-Schreibweise. Die Schrägstrich ist notwendig, da die Modulauflösungsfunktion alles vor dem ersten Gedankenstrich als Namespace ansieht. Hier wird <rootDir> der Root-Ebene der Salesforce DX-Arbeitsumgebung zugeordnet.

   Ihre Datei sollte so aussehen:

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

3. Speichern Sie die Datei.

Jetzt fügen wir den Stub button zum Verzeichnis lightning hinzu, das wir gerade erstellt haben.

1. Klicken Sie mit der rechten Maustaste auf das Verzeichnis lightning, das wir in den letzten Schritten erstellt haben, und wählen Sie New File aus.
2. Geben Sie button.html als Namen der neuen Datei ein.
3. Geben Sie den folgenden Code in die neue Datei ein:

   <template></template>

4. Speichern Sie die Datei.
5. Klicken Sie mit der rechten Maustaste auf das Verzeichnis lightning und wählen Sie New File aus.
6. Geben Sie button.js als Namen der neuen Datei ein.
7. Geben Sie den folgenden Code in die neue Datei ein:

   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. Speichern Sie die Datei.

Diese beiden Dateien sind Kopien der lightning-button-Dateien aus dem Ordner "lightning-stubs". Sie ermöglichen Ihnen, die Basisversion von "lightning-button" für Jest-Tests bei Bedarf zu überschreiben.

Wir können die von "sfdx-lwc-jest" bereitgestellten Standard-Stubs jetzt überschreiben. Wie steht es mit Komponenten aus anderen Namespaces? In diesen Fällen sind nur wenige zusätzliche Anpassungen nötig. Damit befassen wir uns als Nächstes.

Simulieren anderer Komponenten

Beginnen wir mit der Simulation von Komponenten mit einem anderen Namespace. Dazu richten Sie eine Lightning-Webkomponente mit einem Jest-Test ein, der fehlschlägt, und im Anschluss simulieren wir dann eine Korrekturlösung.

1. Erstellen Sie eine neue Lightning-Webkomponente in Visual Studio Code.
2. Legen Sie otherComponents als Namen fest.

Nun fügen wir eine Komponente mit einem anderen Namespace zu der Lightning-Webkomponente hinzu.

1. Öffnen Sie die Datei otherComponents.html und fügen Sie diesen Code zwischen den template-Tags hinzu:

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

2. Speichern Sie die Datei und führen Sie den Test aus.
3. Der Test schlägt aus einem neuen Grund fehl:

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

Da die Komponente <thunder-hammer-button> aus einem anderen Namespace stammt und sich nicht im lokalen lwc-Verzeichnis befindet, müssen Sie einen Stub erstellen und die Jest-Konfiguration ändern, um den Namen dieser Komponenten der Simulationsdatei zuzuordnen.

Zuerst fügen Sie ein Verzeichnis "thunder" hinzu, das den Namespace darstellt. Dann fügen Sie die Dateien hinzu, um die Komponente mithilfe von Stubs zu simulieren.

1. Klicken Sie mit der rechten Maustaste auf das Verzeichnis jest-mocks im Verzeichnis force-app/test/ und wählen Sie New Folder aus.
2. Geben Sie als Namen des neuen Verzeichnisses thunder ein.
3. Klicken Sie mit der rechten Maustaste auf das Verzeichnis thunder und wählen Sie New File aus.
4. Geben Sie hammerButton.html als Namen der neuen Datei ein.
5. Geben Sie den folgenden Code in die neue Datei ein:

   <template></template>

6. Speichern Sie die Datei.
7. Klicken Sie mit der rechten Maustaste auf das neue Verzeichnis thunder und wählen Sie New File aus.
8. Geben Sie hammerButton.js als Namen der neuen Datei ein.
9. Geben Sie den folgenden Code in die neue Datei ein:

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

10. Speichern Sie die Datei und führen Sie den Test aus.
11. Der Test schlägt fehl. Wir müssen die Jest-Konfigurationsdatei ändern.
12. Öffnen Sie jest.config.js und fügen Sie direkt unter der Zeile moduleNameMapper: { diese Zeile ein:

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

13. Speichern Sie die Datei und führen Sie den Test aus.
14. Super! Dieses Mal wird der Test erfolgreich ausgeführt.

Manchmal importiert die Lightning-Webkomponente, mit der Sie arbeiten, eine andere Lightning-Webkomponente, die sich nicht im lokalen LWC-Verzeichnis Ihres Salesforce DX-Projekts befindet. Ohne Stub führen solche Komponenten dazu, dass der Jest-Test festschlägt. Das wollen wir jetzt überprüfen.

1. Öffnen Sie die Datei otherComponents.html und fügen Sie diesen Code nach dem ersten template-Tag ein:

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

2. Speichern Sie die Datei und führen Sie den Test aus.
3. Der Test schlägt fehl, da die Komponente nicht gefunden wird.

Das können Sie mit einem Stub beheben. Dazu erstellen Sie zunächst den Stub und ändern dann die Jest-Konfiguration.

1. Klicken Sie mit der rechten Maustaste auf das Verzeichnis jest-mocks im Verzeichnis force-app/test/ und wählen Sie New Folder aus.
2. Geben Sie als Namen des neuen Verzeichnisses c ein.
3. Klicken Sie mit der rechten Maustaste auf das Verzeichnis c und wählen Sie New File aus.
4. Geben Sie displayPanel.html als Namen der neuen Datei ein.
5. Geben Sie den folgenden Code in die neue Datei ein:

   <template></template>

6. Speichern Sie die Datei.
7. Klicken Sie mit der rechten Maustaste auf das neue Verzeichnis c und wählen Sie New File aus.
8. Geben Sie displayPanel.js als Namen der neuen Datei ein.
9. Geben Sie den folgenden Code in die neue Datei ein:

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

   Beachten Sie, dass es für jeden Parameter, der im Komponentenaufruf übergeben wird, einen api-Decorator gibt.
10. Speichern Sie die Datei.
11. Öffnen Sie jest.config.js und fügen Sie direkt unter der Zeile moduleNameMapper: { diese Zeile ein:

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

12. Speichern Sie die Datei und führen Sie den Test aus.
13. Dieses Mal wird der Test erfolgreich ausgeführt.

Gut gemacht! Sie haben jetzt das Rüstzeug, um Tests für all Ihre Lightning-Webkomponenten zu schreiben. Außerdem liegt es in Ihrer Macht, diese Stub-Implementierungen so komplex oder aber so einfach wie nötig zu gestalten.

Ressourcen

• Externe Website: GitHub: salesforce/sfdx-lwc-jest: Auflösen externer Lightning-Webkomponenten (Englisch)
• Externe Website: GitHub: trailheadapps/lwc-recipes