Assertion API

Vitest obsahuje knihovnu @testing-library/jest-dom, která poskytuje širokou škálu DOM ověření ihned k dispozici. Podrobnou dokumentaci naleznete v souboru readme 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

Pokud používáte TypeScript nebo chcete mít správné typové hinty v expect, ujistěte se, že máte v tsconfig specifikováno buď @vitest/browser/providers/playwright nebo @vitest/browser/providers/webdriverio v závislosti na poskytovateli, kterého používáte. Pokud používáte výchozí poskytovatel preview, můžete místo toho specifikovat @vitest/browser/matchers.

preview

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

playwright

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

webdriverio

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

Testy v prohlížeči mohou selhávat nepravidelně kvůli jejich asynchronní povaze. Z tohoto důvodu je důležité mít způsob, jak zajistit, že aserce budou úspěšné, i když je podmínka zpožděna (například timeoutem, síťovým požadavkem nebo animací). Pro tento účel Vitest poskytuje opakovatelná ověření ihned k dispozici prostřednictvím API expect.poll a expect.element:

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

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

  // @testing-library poskytuje query s vestavěnou možností opakování
  // Bude se snažit najít banner, dokud nebude vykreslen
  const banner = page.getByRole('alert', {
    name: /error/i,
  });

  // Vitest poskytuje `expect.element` s vestavěnou možností opakování
  // Bude kontrolovat `element.textContent`, dokud nebude mít hodnotu "Error!"
  await expect.element(banner).toHaveTextContent('Error!');
});

TIP

expect.element je zkratka pro expect.poll(() => element) a funguje přesně stejným způsobem.

toHaveTextContent a všechny ostatní aserce z @testing-library/jest-dom jsou stále k dispozici na běžném expect bez vestavěného mechanismu opakovatelnosti:

// selže okamžitě, pokud .textContent není 'Error!'
expect(banner).toHaveTextContent('Error!');