import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

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

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:

js
// vitest.config.tsimport { getViteConfig } from 'astro/config';export default getViteConfig({  test: {    // Opciones de configuración de Vitest  },});

Mira la plantilla de inicio Astro + Vitest en GitHub.

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

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

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

shell
pnpm add cypress --save-dev

Configuración

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

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

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.

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

    js
    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');});

    :::tip[Establecer una baseUrl] Puedes establecer "baseUrl": "http://localhost:4321" en el archivo de configuración cypress.config.ts para usar cy.visit("/") en lugar de cy.visit("http://localhost:4321/") para una URL más conveniente. :::

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:

shell
npx cypress run

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

shell
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ó:

shell
Running:  index.cy.ts                                                                     (1 of 1)✓ los titulos son correctos (107ms)1 passing (1s)

:::note[Falla el test] Para verificar que tu test realmente funciona, puedes cambiar la siguiente línea en el archivo index.astro:

astro
 <body>   <h1>Hola mundo desde Astro</h1>   <h1>Hola desde Astro</h1> </body>

Luego ejecuta el test de nuevo. Deberías ver una "x" roja en la salida que confirme que tu test falló. :::

Siguientes pasos

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

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

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.

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.

    html
    ------<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:

    ```js title="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()); }); ```

    :::tip[Configura un baseUrl] Puedes configurar "baseURL": "http://localhost:4321" en el archivo de configuración nightwatch.conf.js para utilizar browser.navigateTo("/") en lugar de browser.navigateTo("http://localhost:4321/") para una URL más conveniente. :::

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:

    sh
    npx nightwatch test/index.js

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

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

    sh
    npx nightwatch test/index.ts -e firefox

:::tip Ejecuta tus tests contra tu código de producción para que se asemejen más a tu sitio en vivo y desplegado. :::

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

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

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.

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.

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

    jsx
    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!');});

    :::tip[Establecer una baseUrl] Puedes establecer "baseURL": "http://localhost:4321" en el archivo de configuración playwright.config.ts para usar page.goto("/") en lugar de page.goto("http://localhost:4321/") para una URL más conveniente. :::

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.

    sh
    npx playwright test index.spec.ts

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

    sh
    npx playwright show-report

:::tip Ejecuta los tests con el código de producción para que se asemejen más a tu sitio activo. :::

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.

js
 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:

Cursos Astro