Componentes LWC - como testar métodos de classe de componente isoladamente?

Question

É possível testar os métodos em uma classe que se estende LightningElement(por exemplo, um componente LWC) de forma isolada?

Em outras palavras, acho que seria mais eficaz simplesmente criar uma instância da classe do componente usando new MyComponent()e, em seguida, testar os métodos de instância. Em outras palavras, testes de unidade JavaScript simples padrão, em vez de testes de nível DOM.

Não é que eu não veja o valor nos testes de nível DOM, mas muita lógica nos componentes LWC não está relacionada ao DOM e é complicado testá-la por meio do DOM.

É uma questão de colocar qualquer lógica não DOM em uma classe que é então importada para o componente?

Obrigado.

Answer 1

Conforme mencionado no final da postagem, sua melhor aposta seria extrair essa lógica em um arquivo separado e importá-la em seu componente, bem como diretamente em um teste de unidade.

Um bom exemplo disso no projeto lwc-recpies seria a biblioteca mortgage.js que tem seus próprios testes (nenhum componente envolvido) e é importada para o componente miscSharedJavascript para uso. Os testes miscSharedJavascript podem então escolher simular a chamada de hipoteca, se desejarem.

Observe também que com o exemplo acima, a lógica retirada do componente não precisa estar em uma pasta separada e pode ser um arquivo Javascript local no pacote do componente.

Answer 2

Em um LWC particularmente pesado, extraí a lógica não-DOM em um helper.jsarquivo separado no pacote de componentes, que testei diretamente com Jest.

Esta resposta do StackExchange descreve onde coloquei o arquivo e como o desdobrei na classe de componente principal.