Állítások API

A Vitest alapértelmezetten tartalmazza a @testing-library/jest-dom könyvtárat, amely széles körű DOM állításokat biztosít. Részletes dokumentációért tekintsd meg a jest-dom dokumentációját:

• 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

Ha TypeScript-et használsz, vagy szeretnél helyes típusjelzéseket az expect függvényhez, győződj meg róla, hogy a tsconfig-ban meg van adva a @vitest/browser/providers/playwright vagy a @vitest/browser/providers/webdriverio érték, attól függően, hogy melyik szolgáltatót használod. Ha az alapértelmezett preview szolgáltatót használod, helyette megadhatod a @vitest/browser/matchers értéket.

preview

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

playwright

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

webdriverio

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

A böngészőben futó tesztek aszinkron természete miatt inkonzisztens hibák fordulhatnak elő. Emiatt fontos garantálni az állítások sikerességét még akkor is, ha a feltétel késleltetve teljesül (például időtúllépés, hálózati kérés vagy animáció miatt). E célból a Vitest biztosít újrapróbálható állításokat az expect.poll és az expect.element API-kon keresztül:

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

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

  // @testing-library provides queries with built-in retry-ability
  // It will try to find the banner until it's rendered
  const banner = page.getByRole('alert', {
    name: /error/i,
  });

  // Vitest provides `expect.element` with built-in retry-ability
  // It will check `element.textContent` until it's equal to "Error!"
  await expect.element(banner).toHaveTextContent('Error!');
});

TIP

Az expect.element az expect.poll(() => element) rövidített formája, és pontosan ugyanúgy működik.

A toHaveTextContent és az összes többi @testing-library/jest-dom állítás továbbra is elérhető az expect objektumon, beépített újrapróbálkozási mechanizmus nélkül:

// azonnal hibát dob, ha a .textContent nem `'Error!'`
expect(banner).toHaveTextContent('Error!');