LWCコンポーネント-コンポーネントクラスのメソッドを個別にテストする方法は?

Dec 04 2020

拡張するクラスLightningElement(LWCコンポーネントなど)のメソッドを個別にテストすることは可能ですか?

つまり、new MyComponent()インスタンスメソッドを使用してコンポーネントクラスのインスタンスを作成し、テストする方が時間効率が良いと思います。つまり、DOMレベルのテストではなく、標準のプレーンJavaScript単体テストです。

DOMレベルのテストで値が表示されないわけではありませんが、LWCコンポーネントの多くのロジックはDOMに関連しておらず、DOMを使用してテストするのは面倒です。

コンポーネントにインポートされるクラスに非DOMロジックを配置することは問題ですか?

ありがとう。

回答

3 TrevorBliss Dec 04 2020 at 03:05

投稿の最後で述べたように、最善の策は、そのロジックを別のファイルに引き出して、コンポーネントにインポートするだけでなく、単体テストに直接インポートすることです。

lwc-recpiesプロジェクトでのその良い例は、独自のテスト(コンポーネントは含まれていません)を持ち、miscSharedJavascriptコンポーネントにインポートされて使用されるmortgage.jsライブラリです。その後、miscSharedJavascriptテストは、必要に応じて住宅ローンの呼び出しをモックアウトすることを選択できます。

また、上記の例では、コンポーネントから引き出されたロジックは別のフォルダーにある必要はなく、コンポーネントバンドル内のローカルJavascriptファイルにすることができます。

1 MatthewSouther Dec 04 2020 at 07:08

特に重いLWCの1つでは、非DOMロジックをhelper.jsコンポーネントバンドル内の別のファイルに取り出し、Jestで直接テストしました。

このStackExchangeの回答では、ファイルをどこに配置し、どのようにメインコンポーネントクラスに折りたたんだかについて説明しています。