Assertion API

Vitest bündelt die Bibliothek @testing-library/jest-dom, um eine breite Palette von DOM-Assertions direkt zur Verfügung zu stellen. Eine detaillierte Dokumentation finden Sie in der jest-dom-README:

• 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

Wenn Sie TypeScript verwenden und korrekte Typ-Hinweise in expect erhalten möchten, stellen Sie sicher, dass Sie je nach verwendetem Provider entweder @vitest/browser/providers/playwright oder @vitest/browser/providers/webdriverio in Ihrer tsconfig angeben. Wenn Sie den Standard-preview-Provider verwenden, können Sie stattdessen @vitest/browser/matchers angeben.

preview

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

playwright

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

webdriverio

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

Tests im Browser können aufgrund ihrer asynchronen Natur inkonsistent fehlschlagen. Aus diesem Grund ist es wichtig, eine Möglichkeit zu haben, um sicherzustellen, dass Assertions erfolgreich sind, auch wenn die Bedingung verzögert eintritt (z. B. durch ein Timeout, eine Netzwerkanfrage oder eine Animation). Zu diesem Zweck bietet Vitest wiederholbare Assertions sofort über die APIs expect.poll und expect.element an:

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

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

  // @testing-library bietet Queries mit integrierter Wiederholungsfähigkeit
  // Es wird versuchen, das Banner zu finden, bis es gerendert ist
  const banner = page.getByRole('alert', {
    name: /error/i,
  });

  // Vitest bietet `expect.element` mit integrierter Wiederholungsfähigkeit
  // Es wird `element.textContent` überprüfen, bis es gleich "Error!" ist
  await expect.element(banner).toHaveTextContent('Error!');
});

TIP

expect.element ist eine Kurzform für expect.poll(() => element) und funktioniert genau gleich.

toHaveTextContent und alle anderen @testing-library/jest-dom-Assertions sind weiterhin mit einem regulären expect ohne integrierten Wiederholungsmechanismus verfügbar:

// schlägt sofort fehl, wenn .textContent nicht `'Error!'` ist
expect(banner).toHaveTextContent('Error!');