Simular outros componentes

Objetivos de aprendizagem

Após concluir esta unidade, você estará apto a:

• Descrever os stubs fornecidos pelo pacote sfdx-lwc-jest.
• Entender como substituir a configuração do Jest.
• Testar componentes fora de seu ambiente de desenvolvimento.
• Criar stubs para componentes externos.

Simular componentes básicos

O pacote sfdx-lwc-jest nos permite executar Jest nos componentes Web do Lightning. Ele define todas as configurações de Jest necessárias para executar testes sem alterações adicionais. Nós o usamos extensivamente nos módulos anteriores. Esse pacote contém um conjunto de stubs (programas que simulam os componentes dos quais o módulo que está em teste depende) para todos os componentes no namespace do Lightning. Isso abrange todos os componentes básicos do Lightning. Isso nos permite executar testes em nosso ambiente e fora do ambiente do Lightning. Os stubs são instalados no diretório src/lightning-stubs, no diretório node-modules/@salesforce/sfdx-lwc-jest .

Algumas vezes, pode ser necessário substituir os stubs padrão fornecidos. Isso é feito substituindo as configurações de Jest e criando stubs personalizados. Vamos percorrer as etapas para fazer isso para lightning-button.

Comece configurando os diretórios dos stubs personalizados no Visual Studio Code.

1. Clique com o botão direito do mouse no diretório force-app e selecione Nova pasta.
2. Digite test como nome do novo diretório.
3. Clique com o botão direito do mouse no novo diretório test e selecione Nova pasta.
4. Digite jest-mocks como nome do novo diretório.
5. Clique com o botão direito do mouse no novo diretório jest-mocks e selecione Nova pasta.
6. Digite lightning como nome do novo diretório.

Esta é a raiz para os stubs de Componentes básicos do Lightning.

Em seguida, substitua a configuração do Jest atualizando o arquivo chamado jest.config.js na raiz do seu projeto de Salesforce DX.

1. Abra o arquivo jest.config.js.
2. Insira o seguinte bloco de código após a linha ...jestConfig:

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

   Observe o moduleNameMapper. Ele está dizendo para o Jest onde encontrar o stub para o lightning-button. O primeiro traço é convertido em uma barra simples e a grafia do restante do nome do componente muda: antes, o nome estava inteiro em letras minúsculas, com as palavras separadas por hifens (“kebab case”); agora, não há mais separação entre as palavras, e a inicial de cada uma delas está em letra maiúscula (“camel case”). A barra simples é usada porque o resolvedor de módulo trata tudo que vem antes do primeiro traço como namespace. Aqui, <rootDir> mapeia para a raiz do espaço de trabalho do Salesforce DX.

   O arquivo deve ficar assim:

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

3. Salve o arquivo.

Agora, vamos adicionar o stub button ao diretório lightning que acabamos de criar.

1. Clique com o botão direito do mouse no diretório lightning que criamos nas últimas etapas e selecione Novo arquivo.
2. Digite button.html como nome do novo arquivo.
3. Insira o bloco de código a seguir no novo arquivo:

   <template></template>

4. Salve o arquivo.
5. Clique com o botão direito do mouse no novo diretório lightning e selecione Novo arquivo.
6. Digite button.js como nome do novo arquivo.
7. Insira o bloco de código a seguir no novo arquivo:

   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. Salve o arquivo.

Esses dois arquivos são cópias dos arquivos lightning-button da pasta lightning-stubs. Eles permitem a substituição do lightning-button de base para testes de Jest, se necessário.

Agora podemos substituir os stubs padrão fornecidos por sfdx-lwc-jest. E os componentes de outros namespaces? Podemos lidar com esses casos com alguns poucos ajustes. Vamos nos aprofundar nisso em seguida.

Simular outros componentes

Vamos começar simulando componentes com um namespace diferente. Para fazer isso, você configura um componente da Web Lightning com um teste de Jest que falha e, em seguida, simularemos uma correção.

1. Crie um novo componente Web do Lightning no Visual Studio Code.
2. Defina o nome como otherComponents.

Agora vamos adicionar um componente com um namespace diferente ao LWC.

1. Abra o arquivo otherComponents.html e adicione este código entre as marcas do modelo:

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

2. Salve o arquivo e execute o teste.
3. O teste falha por um novo motivo:

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

Como o componente <thunder-hammer-button> é de outro namespace e não está no diretório lwc local, você precisa criar um stub e atualizar a configuração do Jest para mapear o nome desses componentes para o arquivo de simulação.

Primeiro, é necessário adicionar um diretório thunder para representar o namespace. Em seguida, adicione os arquivos para usar stubs.

1. Clique com o botão direito do mouse no diretório jest-mocks localizado no diretório force-app/test/ e selecione Nova pasta.
2. Digite thunder como nome do novo diretório.
3. Clique com o botão direito do mouse no diretório thunder e selecione Novo arquivo.
4. Digite hammerButton.html como nome do novo arquivo.
5. Insira o bloco de código a seguir no novo arquivo:

   <template></template>

6. Salve o arquivo.
7. Clique com o botão direito do mouse no novo diretório thunder e selecione Novo arquivo.
8. Digite hammerButton.js como nome do novo arquivo.
9. Insira o bloco de código a seguir no novo arquivo:

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

10. Salve o arquivo e execute o teste.
11. O teste falha. Precisamos atualizar o arquivo de configuração do Jest.
12. Abra jest.config.js e adicione esta linha logo abaixo da linha moduleNameMapper: {:

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

13. Salve o arquivo e execute o teste.
14. Maravilha! O teste passa.

Algumas vezes, o LWC com o qual você está trabalhando importará outro LWC que não estará no diretório LWC local de seu projeto do Salesforce DX, Sem um stub, isso fará com que o Jest falhe. Vamos testar isso.

1. Abra o arquivo otherComponents.html e adicione este código após a primeira marca do modelo:

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

2. Salve o arquivo e execute o teste.
3. O teste falha, pois ele não consegue encontrar o componente.

Você pode corrigir isso com um stub. Para começar, crie o stub; depois, atualize a configuração do Jest.

1. Clique com o botão direito do mouse no diretório jest-mocks localizado no diretório force-app/test/ e selecione Nova pasta.
2. Digite c como nome do novo componente.
3. Clique com o botão direito do mouse no diretório c e selecione Novo arquivo.
4. Digite displayPanel.html como nome do novo componente.
5. Insira o bloco de código a seguir no novo arquivo:

   <template></template>

6. Salve o arquivo.
7. Clique com o botão direito do mouse no novo diretório c e selecione Novo arquivo.
8. Digite displayPanel.js como nome do novo arquivo.
9. Insira o bloco de código a seguir no novo arquivo:

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

   Observe que há um decorador de API para cada parâmetro passado na chamada do componente.
10. Salve o arquivo.
11. Abra jest.config.js e adicione esta linha logo abaixo da linha moduleNameMapper: {:

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

12. Salve o arquivo e execute o teste.
13. O teste passa.

Muito bem! Agora você está preparado para escrever testes para todos os seus componentes Web do Lightning. Você também tem o poder de tornar essas implementações de stub tão sofisticadas ou tão simples quanto for necessário.

Recursos

• Site externo: GitHub: salesforce/sfdx-lwc-jest: Como resolver componentes Web do Lightning externos
• Site externo: GitHub: trailheadapps/lwc-recipes