Agregar pruebas unitarias a una aplicación DOM virtual de Oracle JET

Introducción

Las pruebas son una parte crucial del ciclo de vida del desarrollo, lo que garantiza la creación de aplicaciones web robustas y estables. Existen varios tipos de pruebas, como las pruebas integrales y las pruebas de integración. Las pruebas unitarias implican la escritura de pruebas para unidades individuales de código, incluidas clases, funciones o métodos. Es una buena práctica escribir pruebas unitarias al principio del proceso de desarrollo. Empezar temprano no solo demuestra la importancia de las pruebas, sino que también aumenta la probabilidad de lograr una cobertura completa de las pruebas, en lugar de esperar hasta que la aplicación web sea completamente funcional y compleja.

Objetivos

En este tutorial, aprenderá a instalar herramientas de prueba mediante el comando add testing de la CLI de Oracle JET y a escribir y ejecutar una prueba de unidad en la aplicación DOM virtual de Oracle JET.

El comando add testing instala Jest y la biblioteca de pruebas previas, además de actualizar la sección scripts del archivo package.json de la aplicación con comandos para ejecutar las pruebas de unidad que escriba.

Nota: No utilice Jest para probar o interactuar con los componentes de la interfaz de usuario de Oracle JET en la aplicación. El equipo de Oracle JET probó estos componentes ampliamente como parte del proceso de desarrollo de los componentes. En su lugar, usa Jest para escribir pruebas unitarias para el código que escribes en tu aplicación. Para realizar pruebas de interfaz de usuario automatizadas de la aplicación DOM virtual de Oracle JET que desarrolle, utilice nuestra biblioteca de automatización de interfaz de usuario del componente WebElements de Oracle JET (@oracle/oraclejet-webdriver). Esta biblioteca, construida sobre Selenium WebDriver, está diseñada para funcionar con componentes JET. Para empezar, consulte Configuración de un entorno para crear pruebas de automatización de la interfaz de usuario para aplicaciones web de Oracle JET.

Requisitos

Tarea 1: Adición de las bibliotecas de prueba

  1. Vaya a la carpeta JET-Virtual-DOM-app y agregue las bibliotecas de prueba.

    npx ojet add testing

    Las herramientas de Oracle JET crean una carpeta test-config en la carpeta JET-Virtual-DOM-app con los archivos de configuración que necesitan las bibliotecas de prueba:

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

    También actualiza el archivo package.json con las herramientas de prueba que instala el comando add testing. Estas actualizaciones incluyen entradas para Jest y la biblioteca de pruebas previas.

    . . .
 "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 último, actualiza la sección scripts en el archivo package.json con comandos para llamar a la biblioteca de pruebas.

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

Tarea 2: Escribir una prueba de unidad

  1. Vaya a la carpeta JET-Virtual-DOM-app/src/components/content y cree una nueva carpeta denominada __tests__.

  2. En la carpeta JET-Virtual-DOM-app/src/components/content/__tests__ recién creada, cree un archivo de script de prueba denominado content.spec.tsx.

  3. En el archivo content.spec.tsx, escriba entradas que prueben la presencia de la cadena Product Information en el archivo JET-Virtual-DOM-app/src/components/content. La prueba también espera que esta cadena se incluya en una etiqueta 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");
});

    El archivo de script de prueba content.spec.tsx completado también utiliza llamadas jest.mock para proporcionar acceso a las importaciones (store_data.json y ojs/ojmutablearraydataprovider) que necesita una instancia del componente de contenido. Para incluir estas llamadas jest.mock en el archivo de secuencia de comandos de prueba, consulte content-spec-tsx.txt.

Tarea 3: Ejecución de la prueba de unidad

En la ventana de terminal, navegue hasta el directorio JET-Virtual-DOM-app y ejecute la prueba de unidad en la carpeta JET-Virtual-DOM-app/src/components/content/__tests__ ejecutando el siguiente comando.

   npm test

La prueba se ejecuta y muestra una salida de la consola similar a la siguiente.

   $ 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.

Siguiente paso

Continúe con el siguiente tutorial de este módulo.

Este tutorial forma parte del módulo Su Primera Aplicación Oracle JET Virtual DOM.

Puede volver a la página principal de la ruta de aprendizaje de DOM virtual para acceder a todos los módulos de creación de aplicaciones de DOM virtuales.

Más recursos de aprendizaje

Explore otros laboratorios en docs.oracle.com/learn o acceda a más contenido de aprendizaje gratuito en el canal YouTube de Oracle Learning. Además, visite education.oracle.com/learning-explorer para convertirse en un explorador de Oracle Learning.

Para obtener documentación sobre el producto, visite Oracle Help Center.