LWCコンポーネント-コンポーネントクラスのメソッドを個別にテストする方法は?
拡張するクラスLightningElement
(LWCコンポーネントなど)のメソッドを個別にテストすることは可能ですか?
つまり、new MyComponent()
インスタンスメソッドを使用してコンポーネントクラスのインスタンスを作成し、テストする方が時間効率が良いと思います。つまり、DOMレベルのテストではなく、標準のプレーンJavaScript単体テストです。
DOMレベルのテストで値が表示されないわけではありませんが、LWCコンポーネントの多くのロジックはDOMに関連しておらず、DOMを使用してテストするのは面倒です。
コンポーネントにインポートされるクラスに非DOMロジックを配置することは問題ですか?
ありがとう。
回答
投稿の最後で述べたように、最善の策は、そのロジックを別のファイルに引き出して、コンポーネントにインポートするだけでなく、単体テストに直接インポートすることです。
lwc-recpiesプロジェクトでのその良い例は、独自のテスト(コンポーネントは含まれていません)を持ち、miscSharedJavascriptコンポーネントにインポートされて使用されるmortgage.jsライブラリです。その後、miscSharedJavascriptテストは、必要に応じて住宅ローンの呼び出しをモックアウトすることを選択できます。
また、上記の例では、コンポーネントから引き出されたロジックは別のフォルダーにある必要はなく、コンポーネントバンドル内のローカルJavascriptファイルにすることができます。
特に重いLWCの1つでは、非DOMロジックをhelper.js
コンポーネントバンドル内の別のファイルに取り出し、Jestで直接テストしました。
このStackExchangeの回答では、ファイルをどこに配置し、どのようにメインコンポーネントクラスに折りたたんだかについて説明しています。