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

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:

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

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.

npm install -D cypress

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

pnpm add cypress --save-dev

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 primer test de Cypress

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

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

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

npx cypress run

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

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

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

Para verificar que tu test realmente funciona, puedes cambiar la siguiente línea en el archivo index.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:

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.

npm init playwright@latest

pnpm dlx create-playwright

yarn create playwright

Cree su primer test con Playwright

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

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

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

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.
Terminal window
```
npx playwright test index.spec.ts
```
Para ver el informe completo HTML, puedes hacerlo usando el siguiente comando:
Terminal window
```
npx playwright show-report
```

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:

Añade un script de test en el 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 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 los tests de Playwright.

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

Crear un problema en GitHub

Envíanos comentarios

Testing

Vitest

Cypress

Instalación

Configuración

Crea tu primer test de Cypress

Ejecutando tus tests de Cypress

Siguientes pasos

Playwright

Instalación

Cree su primer test con Playwright

Ejecutar los tests con Playwright

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