Saltearse al contenido

Testing

El testing te ayuda a escribir y mantener funcionando código de Astro. Astro soporta muchas herramientas populares para testing unitario, testing de componentes y testing end-to-end incluyendo Jest, Mocha, Jasmine, Cypress y Playwright. Puedes incluso instalar librerías de testing específicas para frameworks como React Testing Library para testear tus componentes de UI.

Los frameworks de testing te permiten declarar assertions o expectations sobre cómo debería comportarse el código en situaciones específicas, y luego comparar estos con el comportamiento actual de tu código.

Vitest

Sección titulada Vitest

Es un framework de testing unitario nativo de Vite con soporte a ESM, TypeScript y JSX powered by esbuild.

Utiliza el helper getViteConfig() de Astro en tu archivo de configuración vitest.config.ts para configurar Vitest con la configuración de tu proyecto de Astro:

vitest.config.ts
import { getViteConfig } from 'astro/config';


export default getViteConfig({
  test: {
    // Opciones de configuración de Vitest
  },
});

Mira la plantilla de inicio Astro + Vitest en GitHub.

Cypress

Sección titulada Cypress

Cypress es una herramienta front-end de testing hecha para la web moderna. Cypress te permite escribir tests end-to-end para tu sitio de Astro.

Instalación

Sección titulada Instalación

Puedes instalar Cypress utilizando el gestor de paquetes de tu elección.

Ventana de terminal
npm install -D cypress

Esto instalará Cypress localmente como una dependencia de desarrollo para tu proyecto.

Configuración

Sección titulada Configuración

En la raíz de tu proyecto, crea un archivo cypress.config.js con el siguiente contenido:

cypress.config.js
import { defineConfig } from 'cypress'
export default defineConfig({
  e2e: {
    supportFile: false
  }
})

Crea tu primer test de Cypress

Sección titulada Crea tu primer test de Cypress

  1. Escoge una página para testear. Este ejemplo analizará la página de ejemplo index.astro de abajo.

    src/pages/index.astro
    ---
    ---
    <html lang="en">
      <head>
        <title>¡Astro es increíble!</title>
        <meta name="description" content="Trae contenido desde donde quieras y sírvelo rápidamente con la moderna arquitectura de islas de Astro." />
      </head>
      <body>
      <h1>Hola mundo desde Astro</h1>
      </body>
    </html>

  2. Crea un archivo index.cy.js en la carpeta cypress/e2e. Usa el siguiente test en el archivo para verificar que el título de la página y el encabezado son correctos.

    cypress/e2e/index.cy.ts
    it('los titulos son correctos', () => {
      const page = cy.visit('http://localhost:4321');
    

      page.get('title').should('have.text', '¡Astro es increíble!')
      page.get('h1').should('have.text', 'Hola mundo desde Astro');
    });

Ejecutando tus tests de Cypress

Sección titulada Ejecutando tus tests de Cypress

Cypress se puede ejecutar desde la línea de comandos o desde la App de Cypress. La App proporciona una interfaz visual para ejecutar y depurar tus tests.

Primero, inicia el servidor de desarrollo para que Cypress pueda acceder a tu sitio en vivo.

Para ejecutar nuestro test del ejemplo anterior usando la línea de comandos, ejecuta el siguiente comando:

Ventana de terminal
npx cypress run

Alternativamente, para ejecutar el test usando la App de Cypress, ejecuta el siguiente comando:

Ventana de terminal
npx cypress open

Una vez iniciada la App de Cypress, elige E2E Testing y luego selecciona el navegador que se usará para ejecutar los tests.

Una vez que se haya completado la ejecución del test, deberías ver marcas de verificación verdes en la salida que confirman que tu test pasó:

Output de npx cypress run
Running:  index.cy.ts                                                                     (1 of 1)
✓ los titulos son correctos (107ms)
1 passing (1s)

Siguientes pasos

Sección titulada Siguientes pasos

Para más información sobre Cypress puedes visitar los siguientes enlaces:

NightwatchJS

Sección titulada NightwatchJS

Nightwatch.js es un framework de automatización de tests con un conjunto poderoso de herramientas para escribir, ejecutar y depurar pruebas en la web con soporte integrado para todos los principales navegadores y sus equivalentes móviles, así como aplicaciones móviles nativas.

Instalación

Sección titulada Instalación

Puedes instalar NightwatchJS dentro de tu proyecto de Astro usando el gestor de paquetes de tu elección. Sigue los pasos de la CLI para elegir JavaScript/TypeScript, nombra tu carpeta de pruebas y selecciona si deseas incluir tests de componentes y pruebas en navegadores móviles.

Ventana de terminal
npm init nightwatch@latest

Crea tu primera prueba en Nightwatch

Sección titulada Crea tu primera prueba en Nightwatch

  1. Elige una página para testear. Este ejemplo testeará la página de ejemplo index.astro que se muestra a continuación.

    src/pages/index.astro
    ---
    ---
    <html lang="en">
      <head>
        <title>¡Astro es increíble!</title>
        <meta name="description" content="Extrae contenidos de cualquier lugar y sírvelos rápidamente con la arquitectura de islas de última generación de Astro." />
      </head>
      <body></body>
    </html>

  2. Crea una nueva carpeta src/test/ y agrega el siguiente archivo de test:

    src/test/index.js
    describe('Tests de Astro con Nightwatch', function () {
        before(browser => browser.navigateTo('http://localhost:4321/'));
    

        it("Verifica que el título sea correcto", function (browser) {
            browser.assert.titleEquals('¡Astro es increíble!')
        });
    

        after(browser => browser.end());
    });

Ejecutando tus tests de NightwatchJS

Sección titulada Ejecutando tus tests de NightwatchJS

Puedes ejecutar un solo test o varios tests a la vez, probando en uno o varios navegadores. Por defecto, los resultados de tus tests se mostrarán en la terminal. Opcionalmente, puedes abrir el Reporte de Pruebas HTML para mostrar un informe completo y filtrar los resultados de los tests.

Puedes ejecutar los tests con la Extensión de Visual Studio Code para NightwatchJS o siguiendo los pasos a continuación mediante la CLI:

  1. Para ejecutar todos los tests, ingresa el siguiente comando en la terminal. Opcionalmente, incluye el nombre del archivo para ejecutar solo el test individual:

    Ventana de terminal
    npx nightwatch test/index.js

  2. Para ver el Informe de Test HTML completo, ábrelo utilizando el siguiente comando:

    Ventana de terminal
    npx nightwatch test/index.ts --open

  3. Para ejecutar los tests en un navegador específico, utiliza el argumento de la CLI --environment o -e. Si no tienes el navegador relevante instalado, Nightwatch intentará configurarlo por ti utilizando Selenium Manager.

    Ventana de terminal
    npx nightwatch test/index.ts -e firefox

Más información sobre NightwatchJS se encuentra disponible en los siguientes enlaces:

Playwright

Sección titulada Playwright

Playwright es un framework de testing end-to-end para aplicaciones web modernas. Usa la API de Playwright en JavaScript o TypeScript para testear tu código de Astro en todos los motores de renderizado modernos incluyendo Chromium, Webkit y Firefox.

Instalación

Sección titulada Instalación

Puedes empezar y ejecutar tus tests usando la Extensión de VS Code.

Alternativamente, puedes instalar Playwright dentro de tu proyecto de Astro usando el gestor de paquetes de tu elección. Sigue los pasos de la CLI para elegir JavaScript/TypeScript, el nombre de tu carpeta de tests y añadir un workflow opcional de GitHub Actions.

Ventana de terminal
npm init playwright@latest

Cree su primer test con Playwright

Sección titulada Cree su primer test con Playwright

  1. Elige una página para testear. Este ejemplo probará la página de ejemplo index.astro a continuación.

    src/pages/index.astro
    ---
    ---
    <html lang="en">
      <head>
         <title>¡Astro es increíble!</title>
        <meta name="description" content="Trae contenido desde donde quieras y sírvelo rápidamente con la moderna arquitectura de islas de Astro." />
      </head>
      <body></body>
    </html>

  2. Crea una nueva carpeta y añade el siguiente archivo de test en src/test. Copia y pega el siguiente test dentro del archivo para verificar que la meta información de la página es correcta. Actualiza el valor <title> de la página para que coincida con la página que se está testeando.

    src/test/index.spec.ts
    import { test, expect } from '@playwright/test';
    

    test('el titulo es correcto', async ({ page }) => {
      await page.goto("http://localhost:4321/");
    

      await expect(page).toHaveTitle('¡Astro es increíble!');
    });

Ejecutar los tests con Playwright

Sección titulada Ejecutar los tests con Playwright

Puede ejecutar un solo test o varios tests a la vez, testeando en uno o en varios navegadores. Por defecto, los resultados de sus tests se muestran en la terminal. Si lo desea, puedes abrir el informe de tests HTML para visualizar un informe completo y filtrar los resultados de los tests.

  1. Para ejecutar el test del ejemplo anterior desde la línea de comando, utilice el comando test. Opcionalmente, incluya el nombre del archivo para ejecutar solo ese test.

    Ventana de terminal
    npx playwright test index.spec.ts

  2. Para ver el informe completo HTML, puedes hacerlo usando el siguiente comando:

    Ventana de terminal
    npx playwright show-report

Avanzado: Lanzamiento de un servidor web de desarrollo durante los tests

Sección titulada Avanzado: Lanzamiento de un servidor web de desarrollo durante los tests

Puede también hacer que Playwright inicie su servidor cuando ejecute su script de testing utilizando la opción webServer en el archivo de configuración de Playwright.

Aquí un ejemplo de la configuración y los comandos necesarios cuando se utiliza npm:

  1. Añade un script de test en el archivo package.json en la raíz del proyecto, como "test:e2e": "playwright test".

  2. En playwright.config.ts, añade el objeto webServer y actualiza el valor del comando npm run preview.

playwright.config.ts
 import { defineConfig } from '@playwright/test';


 export default defineConfig({
   webServer: {
     command: 'npm run preview',
     url: 'http://localhost:4321/',
     timeout: 120 * 1000,
     reuseExistingServer: !process.env.CI,
   },
   use: {
     baseURL: 'http://localhost:4321/',
   },
 });
  1. Ejecuta npm run build, luego ejecuta npm run test:e2e para ejecutar los tests de Playwright.

Más información sobre Playwright puedes encontrarla en los enlaces de abajo:

Contribuir

¿Qué tienes en mente?

Crear un problema en GitHub

La forma más rápida de alertar a nuestro equipo de un problema.

Comunidad