API d'assertions

Vitest intègre la bibliothèque @testing-library/jest-dom pour offrir une large gamme d'assertions DOM prêtes à l'emploi. Pour une documentation détaillée, veuillez consulter le fichier README 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 vous utilisez TypeScript ou si vous souhaitez bénéficier de suggestions de types précises dans expect, assurez-vous d'avoir spécifié @vitest/browser/providers/playwright ou @vitest/browser/providers/webdriverio dans votre tsconfig en fonction du fournisseur que vous utilisez. Si vous utilisez le fournisseur par défaut preview, vous pouvez spécifier @vitest/browser/matchers à la place.

preview

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

playwright

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

webdriverio

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

Les tests dans le navigateur peuvent parfois échouer de manière non déterministe en raison de leur nature asynchrone. Il est donc important de disposer d'un mécanisme pour garantir que les assertions réussissent même si la condition est retardée (par un délai d'attente, une requête réseau ou une animation, par exemple). À cette fin, Vitest propose des assertions avec mécanisme de réessai intégré via les API expect.poll et expect.element :

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

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

  // @testing-library fournit des requêtes avec un mécanisme de réessai intégré.
  // Il tentera de trouver la bannière jusqu'à ce qu'elle soit rendue.
  const banner = page.getByRole('alert', {
    name: /error/i,
  });

  // Vitest fournit `expect.element` avec un mécanisme de réessai intégré.
  // Il vérifiera que `element.textContent` est égal à "Error!".
  await expect.element(banner).toHaveTextContent('Error!');
});

TIP

expect.element est un raccourci pour expect.poll(() => element) et fonctionne exactement de la même manière.

toHaveTextContent et toutes les autres assertions @testing-library/jest-dom sont toujours disponibles sur un expect standard sans mécanisme de réessai intégré :

// échouera instantanément si .textContent n'est pas `'Error!'`
expect(banner).toHaveTextContent('Error!');