API d’Assertion

Vitest regroupe la @testing-library/jest-dom pour fournir une large gamme d’assertions DOM prêtes à l’emploi. Pour une documentation détaillée, vous pouvez lire le README de jest-dom :

Si vous utilisez TypeScript ou si vous souhaitez avoir des suggestions de type correctes dans expect, assurez-vous d’avoir soit @vitest/browser/providers/playwright soit @vitest/browser/providers/webdriverio spécifié dans votre tsconfig, selon le fournisseur que vous utilisez. Si vous utilisez le fournisseur par défaut preview, vous pouvez spécifier @vitest/browser/matchers à la place.

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

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

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

Les tests dans le navigateur peuvent échouer de manière incohérente en raison de leur nature asynchrone. Pour cette raison, il est important d’avoir un moyen de garantir que les assertions réussissent même si la condition est retardée (par un délai, une requête réseau ou une animation, par exemple). À cet effet, Vitest fournit des assertions réessayables prêtes à l’emploi via les API expect.poll et expect.element :

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

test('la bannière d'erreur est rendue', async () => {
  triggerError()

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

  // Vitest fournit `expect.element` avec une capacité de réessai intégrée
  // Elle vérifiera `element.textContent` jusqu'à ce qu'il soit égal à "Erreur !"
  await expect.element(banner).toHaveTextContent('Erreur !')
})

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 expect régulier sans mécanisme de réessai intégré :

// échouera immédiatement si .textContent n'est pas `'Erreur !'`
expect(banner).toHaveTextContent('Erreur !')