API di Asserzione

Vitest integra la libreria @testing-library/jest-dom per fornire un'ampia gamma di asserzioni DOM disponibili out-of-the-box. Per la documentazione dettagliata, puoi consultare il readme di 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

Se stai utilizzando TypeScript o desideri avere suggerimenti di tipo corretti in expect, assicurati di aver specificato @vitest/browser/providers/playwright o @vitest/browser/providers/webdriverio nel tuo tsconfig a seconda del provider utilizzato. Se usi il provider predefinito preview, puoi specificare invece @vitest/browser/matchers.

preview

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

playwright

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

webdriverio

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

I test nel browser potrebbero fallire in modo non deterministico a causa della loro natura asincrona. Per questo motivo, è importante avere un modo per garantire che le asserzioni abbiano successo anche se la condizione è soggetta a ritardi (ad esempio, da un timeout, una richiesta di rete o un'animazione). A questo scopo, Vitest fornisce asserzioni ripetibili pronte all'uso tramite le API expect.poll e expect.element:

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

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

  // @testing-library fornisce query con funzionalità di riprova integrate
  // Proverà a trovare il banner finché non viene renderizzato
  const banner = page.getByRole('alert', {
    name: /error/i,
  });

  // Vitest fornisce `expect.element` con funzionalità di riprova integrate
  // Verificherà `element.textContent` finché non sarà uguale a "Error!"
  await expect.element(banner).toHaveTextContent('Error!');
});

TIP

expect.element è una scorciatoia per expect.poll(() => element) e funziona esattamente allo stesso modo.

toHaveTextContent e tutte le altre asserzioni di @testing-library/jest-dom sono ancora disponibili su un normale expect senza un meccanismo di riprova integrato:

// fallisce immediatamente se .textContent non è `'Error!'`
expect(banner).toHaveTextContent('Error!');