API de Aserción

Vitest incluye la biblioteca @testing-library/jest-dom para proporcionar una amplia gama de aserciones DOM listas para usar. Para obtener documentación detallada, puedes consultar la documentación de jest-dom:

• toBeDisabled
• toBeEnabled
• toBeEmptyDOMElement
• toBeInTheDocument
• toBeInvalid
• toBeRequired
• toBeValid
• toBeVisible
• toContainElement
• toContainHTML
• toHaveAccessibleDescription
• toHaveAccessibleErrorMessage
• toHaveAccessibleName
• toHaveAttribute
• toHaveClass
• toHaveFocus
• toHaveFormValues
• toHaveStyle
• toHaveTextContent
• toHaveValue
• toHaveDisplayValue
• toBeChecked
• toBePartiallyChecked
• toHaveRole
• toHaveErrorMessage

Si estás utilizando TypeScript o deseas tener sugerencias de tipo correctas en expect, asegúrate de haber especificado @vitest/browser/providers/playwright o @vitest/browser/providers/webdriverio en tu tsconfig, dependiendo del proveedor que utilices. Si utilizas el proveedor predeterminado preview, puedes especificar en su lugar @vitest/browser/matchers.

preview

{
  "compilerOptions": {
    "types": ["@vitest/browser/matchers"]
  }
}

playwright

{
  "compilerOptions": {
    "types": ["@vitest/browser/providers/playwright"]
  }
}

webdriverio

{
  "compilerOptions": {
    "types": ["@vitest/browser/providers/webdriverio"]
  }
}

Las pruebas en el navegador pueden fallar de forma inconsistente debido a su naturaleza asíncrona. Por esta razón, es importante tener un modo de garantizar que las aserciones tengan éxito incluso si la condición se retrasa (por ejemplo, debido a un tiempo de espera, una solicitud de red o una animación). Para este propósito, Vitest proporciona aserciones con reintento automático listas para usar a través de las API expect.poll y expect.element:

import { expect, test } from 'vitest';
import { page } from '@vitest/browser/context';

test('error banner is rendered', async () => {
  triggerError();

  // @testing-library proporciona consultas con capacidad de reintento integrada.
  // Intentará encontrar el banner hasta que esté renderizado.
  const banner = page.getByRole('alert', {
    name: /error/i,
  });

  // Vitest proporciona `expect.element` con capacidad de reintento integrada.
  // Verificará `element.textContent` hasta que coincida con "Error!".
  await expect.element(banner).toHaveTextContent('Error!');
});

TIP

expect.element es una abreviatura de expect.poll(() => element) y funciona exactamente de la misma manera.

toHaveTextContent y todas las demás aserciones de @testing-library/jest-dom todavía están disponibles en un expect regular sin un mecanismo de reintento integrado.

// fallará de inmediato si .textContent no es `'Error!'`
expect(banner).toHaveTextContent('Error!');