Testing

Las pruebas te ayudan a escribir y mantener código de Astro que funciona. Astro soporta muchas herramientas populares para pruebas unitarias, pruebas de componentes, y pruebas end-to-end incluyendo Jest, Mocha, Jasmine, Cypress y Playwright. Incluso puedes instalar librerías de testing específicas de framework como React Testing Library para probar tus componentes de UI framework.

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

Pruebas unitarias y de integración

Vitest

Un framework de pruebas unitarias nativo de Vite con soporte ESM, TypeScript y JSX impulsado por esbuild.

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

/// <reference types="vitest/config" />
import { getViteConfig } from 'astro/config';

export default getViteConfig({
  test: {
    // Vitest configuration options
  },
});

Por defecto, getViteConfig() intentará cargar un archivo de configuración de Astro en tu proyecto y aplicarlo al entorno de pruebas. A partir de Astro 4.8, si necesitas personalizar la configuración de Astro aplicada en tus pruebas, pasa un segundo argumento a getViteConfig():

export default getViteConfig(
  { test: { /* Vitest configuration options */ } },
  {
    site: 'https://example.com/',
    trailingSlash: 'always',
  },
);

Consulta la plantilla de inicio de Astro + Vitest en GitHub.

Vitest y Container API

Añadido en: astro@4.9.0

Puedes probar componentes de Astro nativamente usando la container API. Primero, configura vitest como se explicó arriba, luego crea un archivo .test.js para probar tu componente:

import { experimental_AstroContainer as AstroContainer } from 'astro/container';
import { expect, test } from 'vitest';
import Card from '../src/components/Card.astro';

test('Card with slots', async () => {
  const container = await AstroContainer.create();
  const result = await container.renderToString(Card, {
    slots: {
      default: 'Card content',
    },
  });

  expect(result).toContain('This is a card');
  expect(result).toContain('Card content');
});

Pruebas end-to-end

Playwright

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

Instalación

Puedes empezar y ejecutar tus pruebas 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 del CLI para elegir JavaScript/TypeScript, nombrar tu carpeta de pruebas, y añadir un workflow opcional de GitHub Actions.

npm init playwright@latest

pnpm create playwright

yarn create playwright

Crea tu primera prueba de Playwright

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

---
---
<html lang="en">
  <head>
    <title>Astro is awesome!</title>
    <meta name="description" content="Pull content from anywhere and serve it fast with Astro's next-gen islands architecture." />
  </head>
  <body></body>
</html>

Crea una nueva carpeta y añade el siguiente archivo de prueba en src/test. Copia y pega la siguiente prueba en el archivo para verificar que la información meta de la página es correcta. Actualiza el valor del <title> de la página para que coincida con la página que estás probando.
src/test/index.spec.ts
```
import { test, expect } from '@playwright/test';

test('meta is correct', async ({ page }) => {
  await page.goto("http://localhost:4321/");

  await expect(page).toHaveTitle('Astro is awesome!');
});
```
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 tus pruebas de Playwright

Puedes ejecutar una sola prueba o varias pruebas a la vez, probando uno o múltiples navegadores. Por defecto, tus resultados de prueba se mostrarán en la terminal. Opcionalmente, puedes abrir el HTML Test Reporter para mostrar un reporte completo y filtrar los resultados de las pruebas.

Para ejecutar nuestra prueba del ejemplo anterior usando la línea de comandos, usa el comando test. Opcionalmente, incluye el nombre del archivo para ejecutar solo esa prueba:
Ventana de la terminal
```
npx playwright test index.spec.ts
```
Para ver el HTML Test Report completo, ábrelo usando el siguiente comando:
Ventana de la terminal
```
npx playwright show-report
```

Avanzado: Lanzar un servidor web de desarrollo durante las pruebas

También puedes hacer que Playwright inicie tu servidor cuando ejecutas tu script de pruebas usando la opción webServer en el archivo de configuración de Playwright.

Aquí hay un ejemplo de la configuración y comandos necesarios al usar npm:

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

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

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

Ejecuta npm run build, luego ejecuta npm run test:e2e para ejecutar las pruebas de Playwright.

Más información sobre Playwright se puede encontrar en los siguientes enlaces:

Cypress

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

Instalación

Puedes instalar Cypress usando el gestor de paquetes de tu elección. Esto instalará Cypress localmente como una dependencia de desarrollo para tu proyecto.

npm install cypress --save-dev

pnpm add --save-dev cypress

yarn add cypress --dev

Configuración

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

import { defineConfig } from 'cypress'

export default defineConfig({
  e2e: {
    supportFile: false
  }
})

Crea tu primera prueba de Cypress

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

---
---
<html lang="en">
  <head>
    <title>Astro is awesome!</title>
    <meta name="description" content="Pull content from anywhere and serve it fast with Astro's next-gen islands architecture." />
  </head>
  <body>
  <h1>Hello world from Astro</h1>
  </body>
</html>

Crea un archivo index.cy.js en la carpeta cypress/e2e. Usa la siguiente prueba en el archivo para verificar que el título de la página y el encabezado son correctos.
cypress/e2e/index.cy.js
```
it('titles are correct', () => {
  const page = cy.visit('http://localhost:4321');

  page.get('title').should('have.text', 'Astro is awesome!')
  page.get('h1').should('have.text', 'Hello world from Astro');
});
```
Puedes establecer "baseUrl": "http://localhost:4321" en el archivo de configuración cypress.config.js para usar cy.visit("/") en lugar de cy.visit("http://localhost:4321/") para una URL más conveniente.

Ejecutar tus pruebas de Cypress

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

Primero, inicia el dev server para que Cypress pueda acceder a tu sitio en vivo.

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

npx cypress run

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

npx cypress open

Una vez que la Cypress App se inicie, elige E2E Testing, luego selecciona el navegador a usar para ejecutar las pruebas.

Una vez que la ejecución de la prueba termine, deberías ver marcas de verificación verdes en la salida confirmando que tu prueba pasó:

Running:  index.cy.js                                                                     (1 of 1)

✓ titles are correct (107ms)

1 passing (1s)

Para comprobar que tu prueba realmente funciona, puedes cambiar la siguiente línea en el archivo index.astro:

 <body>
   <h1>Hello world from Astro</h1>
   <h1>Hello from Astro</h1>
 </body>

Luego ejecuta la prueba de nuevo. Deberías ver una “x” roja en la salida confirmando que tu prueba falló.

Pasos siguientes

Más información sobre Cypress se puede encontrar en los siguientes enlaces:

NightwatchJS

Nightwatch.js es un framework de automatización de pruebas con un conjunto poderoso de herramientas para escribir, ejecutar, y depurar tus pruebas en la web con soporte integrado para todos los navegadores principales 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 del CLI para elegir JavaScript/TypeScript, nombrar tu carpeta de pruebas, y seleccionar si incluir o no pruebas de componentes y pruebas en navegadores móviles.

npm init nightwatch@latest

pnpm create nightwatch

yarn create nightwatch

Crea tu primera prueba de Nightwatch

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

---
---
<html lang="en">
  <head>
    <title>Astro is awesome!</title>
    <meta name="description" content="Pull content from anywhere and serve it fast with Astro's next-gen islands architecture." />
  </head>
  <body></body>
</html>

Crea una nueva carpeta src/test/ y añade el siguiente archivo de prueba:
src/test/index.js
```
describe('Astro testing with Nightwatch', function () {
    before(browser => browser.navigateTo('http://localhost:4321/'));

    it("check that the title is correct", function (browser) {
        browser.assert.titleEquals('Astro is awesome!')
    });

    after(browser => browser.end());
});
```
Puedes establecer "baseURL": "http://localhost:4321" en el archivo de configuración nightwatch.conf.js para usar browser.navigateTo("/") en lugar de browser.navigateTo("http://localhost:4321/") para una URL más conveniente.

Ejecutar tus pruebas de NightwatchJS

Puedes ejecutar las pruebas con la extensión VSCode de NightwatchJS o usando los pasos del CLI a continuación:

Para ejecutar todas las pruebas, ingresa el siguiente comando en la terminal. Opcionalmente, incluye el nombre del archivo para ejecutar solo una prueba:
Ventana de la terminal
```
npx nightwatch test/index.js
```
Adicionalmente, puedes ejecutar las pruebas contra un navegador específico usando el argumento del CLI --environment o -e. Si no tienes el navegador relevante instalado, Nightwatch intentará configurarlo para ti usando Selenium Manager:
Ventana de la terminal
```
npx nightwatch test/index.ts -e firefox
```
Para ver el HTML Test Report completo, ábrelo usando el siguiente comando:
Ventana de la terminal
```
npx nightwatch test/index.ts --open
```

Más información sobre NightwatchJS se puede encontrar en los siguientes enlaces:

Contribuir Comunidad Patrocinar