tubasa_gekituiのブログ

salesforce社の無料学習サイト「Trailhead」の覚え書きとか日記とか

トップ > Trailhead > Trailheadモジュール「Lightning Web Components Tests」覚え書き

Trailheadモジュール「Lightning Web Components Tests」覚え書き

Trailhead

本記事は、モジュール「Lightning Web Components Tests」の覚え書き、気づきの整理です。

trailhead.salesforce.com

Lightning WebコンポーネントをJestを使用してテストする話(原文ママ) 。
５単元あるが全部クイズのみ。
このモジュールはもっと難しくできたはずだが簡単な理由は、同時期にスーパーバッチ「Lightning Web Components Specialist」が公開されておりこのモジュールのクリアがアンロック条件になっている。

Get Started with Testing

  • Unit Testing(モジュールに対するテスト) とEnd-to-End Testing(アプリ全体に対するテスト)
  • End-to-End テストは単体テストより信頼性が低い。
    • 環境のランダムな不整合のため？？？訳がよーわからんが、同じアプリ(メタデータの変更は無し)でも1回通ったテストが次も通るとは限らない。ってことか？

Set Up Jest Testing Framework

  • いつもの開発環境構築の手順が初っ端から展開
  • lwc 用にカスタマイズされたjest がある。 sfdx-lwc-jest
    • lwc-recipes の package.json にはsfdx-lwc-jestを実行するスクリプトが定義されているんですが・・・。
  • 開発中にテストを継続実行したいなら --watchパラメータ。デバッグモードで実行なら --debug パラメータ。コードカバレッジが欲しいなら --coverage パラメータ。

Write a Jest Test

  • SFDX: Create Lightning Component は選ばないように、Aura なので。と Trailheadさん優しい。
  • テストコードを作成するときのお作法
    • __tests__フォルダを作成
    • .forceignore にテストフォルダのパスを追加。 git には登録したいので gitignoreには更新しない。
    • jestファイルを追加
  • test の実行 (多分、共通の jest とコーディングルールは同じ。
    • describe テストスイートのキーワード
    • it テスト実行のブロック。test のエイリアス。
    • afterEach() 各テストブロックの実行後に実行されるコード。
  • 非同期処理のテストは Promise のresolve が返ってくるまで待つようにする。
  • connectedCallback() DOMにLightning Web Component が挿入された時に発火。
  • disconnectedCallback() DOMからLightning Web Component が除去された時に発火。

Write a Jest Test for Wire Service

  • wire アダプタ ３種：Generic, Lightning Data Service, Apex
    • それぞれのサンプルコードが丁寧に記載
  • Apexワイヤアダプタは対象のApex は作成しなくてもテストできる。
    • 基本はモックを活用。Lightning Data Serviceも同様。

Mock Other Components

  • Lightning Base Componentスタブのルート：force-app/test/jest-mock/lightning
    • 途中にボタンのスタブを作成するのがあるわけだが、上記のフォルダパスの直下に配置したら、例のデコレータのエラーが出るんだが・・・
  • sfdx-lwc-jestパッケージに Lightning名前空間のすべてのコンポーネントの一連のスタブが入っている。利用するには要オーバーライド。
  • コンポーネントをスタブするには、htmlとJavascriptファイルが必要。

ここ２週間でLightning Web Components のコンテンツがリリースされまくったが、背景にはスーパーバッチ「Lightning Web Components Specialist」があったと思われる。
このモジュールは個人的に実際の現場ですぐに活用できそうな感があったのでもう一回やり直そう。