Adicionar testes de unidade a um aplicativo DOM virtual do Oracle JET

Introdução

O teste é uma parte crucial do ciclo de vida do desenvolvimento, garantindo a criação de aplicativos web robustos e estáveis. Existem vários tipos de teste, como teste de ponta a ponta e teste de integração. O teste de unidade envolve a escrita de testes para unidades individuais de código, incluindo classes, funções ou métodos. É uma boa prática escrever testes de unidade no início do processo de desenvolvimento. Começar cedo não só demonstra a importância do teste, mas também aumenta a probabilidade de alcançar a cobertura completa do teste, em vez de esperar até que o aplicativo web seja totalmente funcional e complexo.

Objetivos

Neste tutorial, você aprenderá a instalar ferramentas de teste usando o comando add testing da CLI do Oracle JET e como escrever e executar um teste de unidade no aplicativo DOM virtual do Oracle JET.

O comando adicionar teste instala o Jest e a Biblioteca de Testes de Preação, além de atualizar a seção scripts do arquivo package.json do seu aplicativo com comandos para executar os testes de unidade que você escreve.

Observação: Não use o Jest para testar ou interagir com os componentes da interface do usuário do Oracle JET em seu aplicativo. A equipe do Oracle JET testou extensivamente esses componentes como parte do processo de desenvolvimento dos componentes. Em vez disso, use o Jest para escrever testes de unidade para o código que você escreve em seu aplicativo. Para executar o teste automatizado da interface do usuário do aplicativo Oracle JET DOM virtual que você desenvolve, use nossa biblioteca de automação da interface do usuário WebElements do componente Oracle JET (@oracle/oraclejet-webdriver). Esta biblioteca, construída sobre o Selenium WebDriver, foi projetada para funcionar com componentes do JET. Para começar, consulte Configurar um ambiente para criar testes de automação da interface do usuário para aplicativos Web do Oracle JET.

Pré-requisitos

Tarefa 1: Adicionar as Bibliotecas de Teste

  1. Navegue até a pasta JET-Virtual-DOM-app e adicione as bibliotecas de teste.

    npx ojet add testing

    O conjunto de ferramentas do Oracle JET cria uma pasta test-config na pasta JET-Virtual-DOM-app com os arquivos de configuração exigidos pelas bibliotecas de teste:

    ./JET-Virtual-DOM-app/test-config
jest.config.js
testSetup.ts

    Ele também atualiza o arquivo package.json com as ferramentas de teste que o comando add testing instala. Essas atualizações incluem entradas para o Jest e a Biblioteca de Testes de Preação.

    . . .
 "devDependencies": {
   . . .
   "@oracle/oraclejet-jest-preset": "16.0.11",
   "@testing-library/preact": "3.2.3",
   "@types/jest": "29.5.3",
   . . .
   "jest": "29.6.2",
   "jest-environment-jsdom": "29.6.2",
   . . .
},

    Por fim, ele atualiza a seção scripts no arquivo package.json com comandos para chamar a biblioteca de teste.

    . . .
"scripts": {
 . . .
  "test": "jest -c test-config/jest.config.js",
  "test:debug": "node --inspect-brk node_modules/.bin/jest --runInBand"
 },

Tarefa 2: Escrever um Teste de Unidade

  1. Navegue até a pasta JET-Virtual-DOM-app/src/components/content e crie uma nova pasta chamada __tests__.

  2. Na pasta JET-Virtual-DOM-app/src/components/content/__tests__ recém-criada, crie um arquivo de script de teste chamado content.spec.tsx.

  3. No arquivo content.spec.tsx, grave as entradas que testam a presença da string Product Information no arquivo JET-Virtual-DOM-app/src/components/content. O teste também espera que essa string seja incluída em uma tag de elemento H1.

    import { h } from "preact";
import { render } from "@testing-library/preact";
import { Content } from "../index";

test("renders Product Information header with a h1 heading", () => {
   const { getByText } = render(<Content />);
   const headerElement = getByText("Product Information");
   expect(headerElement.tagName).toBe("H1");
});

    O arquivo de script de teste content.spec.tsx concluído também usa chamadas jest.mock para fornecer acesso às importações (store_data.json e ojs/ojmutablearraydataprovider) que uma instância do componente de Conteúdo exige. Para incluir essas chamadas jest.mock no arquivo de script de teste, consulte content-spec-tsx.txt.

Tarefa 3: Executar o Teste de Unidade

Na janela do terminal, navegue até o diretório JET-Virtual-DOM-app e execute o teste de unidade na pasta JET-Virtual-DOM-app/src/components/content/__tests__ executando o comando a seguir.

   npm test

O teste é executado e exibe a saída da console semelhante à seguinte.

   $ npm test

   > JET-Virtual-DOM-app@1.0.0 test
   > jest -c test-config/jest.config.js

   PASS  src/components/content/__tests__/content.spec.tsx
   Test suite for Content component
      √ Renders Product Information header with a H1 tag (14 ms)

   Test Suites: 1 passed, 1 total
   Tests:       1 passed, 1 total
   Snapshots:   0 total
   Time:        2.145 s
   Ran all test suites.

Próxima Etapa

Prossiga para o próximo tutorial neste módulo.

Este tutorial faz parte do módulo Seu Primeiro Aplicativo Oracle JET Virtual DOM.

Você pode retornar à página principal da programação de estudo do DOM virtual para acessar todos os módulos na criação de aplicativos DOM virtuais.

Mais Recursos de Aprendizado

Explore outros laboratórios em docs.oracle.com/learn ou acesse mais conteúdo de aprendizado gratuito no canal do Oracle Learning YouTube. Além disso, acesse education.oracle.com/learning-explorer para se tornar um Oracle Learning Explorer.

Para obter a documentação do produto, visite o Oracle Help Center.