Állítási API

A Vitest alapból széles körű DOM állításokat biztosít, amelyek a @testing-library/jest-dom könyvtárból származnak, kiegészítve a lokátorok támogatásával és beépített újrapróbálkozási képességgel.

TypeScript támogatás

Ha TypeScriptet használ, vagy pontos típussegédletet szeretne az expect függvényben, győződjön meg arról, hogy a @vitest/browser/context valahol hivatkozva van. Ha soha nem importált onnan, hozzáadhat egy reference megjegyzést bármely fájlhoz, amelyet a tsconfig.json lefed:

/// <reference types="@vitest/browser/context" />

A böngészőben futó tesztek aszinkron természetük miatt rendszertelenül hibázhatnak. Emiatt fontos, hogy legyen egy módja annak garantálására, hogy az állítások sikeresek legyenek, még akkor is, ha a feltétel késik (például időtúllépés, hálózati kérés vagy animáció miatt). Erre a célra a Vitest alapból újrapróbálkozható állításokat biztosít az expect.poll és expect.element API-kon keresztül:

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

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

  // Ez létrehoz egy lokátort, amely megpróbálja megtalálni az elemet, amikor bármelyik metódusát meghívják.
  // Ez a hívás önmagában nem ellenőrzi az elem létezését.
  const banner = page.getByRole('alert', {
    name: /error/i,
  });

  // A Vitest beépített újrapróbálkozási képességgel biztosítja az `expect.element`-et.
  // Ismételten ellenőrzi, hogy az elem létezik-e a DOM-ban, és hogy az `element.textContent` tartalma megegyezik-e az "Error!" szöveggel, amíg az összes feltétel teljesül.
  await expect.element(banner).toHaveTextContent('Error!');
});

Javasoljuk, hogy mindig használja az expect.element függvényt, amikor page.getBy* lokátorokkal dolgozik, mivel ez csökkenti a tesztek megbízhatatlanságát. Vegye figyelembe, hogy az expect.element egy második opciót is elfogad:

interface ExpectPollOptions {
  // Az állítás újrapróbálkozásának intervalluma milliszekundumban
  // Alapértelmezés: "expect.poll.interval" konfigurációs opció
  interval?: number;
  // Az állítás újrapróbálkozásának ideje milliszekundumban
  // Alapértelmezés: "expect.poll.timeout" konfigurációs opció
  timeout?: number;
  // Az üzenet, amely az állítás sikertelensége esetén kiíródik
  message?: string;
}

TIP

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

A toHaveTextContent és az összes többi állítás továbbra is elérhető a szokásos expect függvényen, beépített újrapróbálkozási mechanizmus nélkül:

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

toBeDisabled

function toBeDisabled(): Promise<void>;

Lehetővé teszi annak ellenőrzését, hogy egy elem a felhasználó számára le van-e tiltva.

Akkor teljesül, ha az elem egy űrlapvezérlő, és a disabled attribútum meg van adva ezen az elemen, vagy az elem egy disabled attribútummal rendelkező űrlap elemnek a leszármazottja.

Megjegyzendő, hogy csak natív vezérlőelemek, mint például a HTML button, input, select, textarea, option, optgroup tilthatók le a "disabled" attribútummal. Más elemeken a "disabled" attribútum figyelmen kívül marad, kivéve, ha egyéni elemről van szó.

html

<button data-testid="button" type="submit" disabled>submit</button>

await expect.element(getByTestId('button')).toBeDisabled(); // ✅
await expect.element(getByTestId('button')).not.toBeDisabled(); // ❌

toBeEnabled

function toBeEnabled(): Promise<void>;

Lehetővé teszi annak ellenőrzését, hogy egy elem nincs-e letiltva a felhasználó szempontjából.

Úgy működik, mint a not.toBeDisabled(). Használja ezt az összehasonlítót, hogy elkerülje a kettős tagadást a tesztekben.

html

<button data-testid="button" type="submit" disabled>submit</button>

await expect.element(getByTestId('button')).toBeEnabled(); // ✅
await expect.element(getByTestId('button')).not.toBeEnabled(); // ❌

toBeEmptyDOMElement

function toBeEmptyDOMElement(): Promise<void>;

Ez lehetővé teszi annak ellenőrzését, hogy egy elemnek nincs-e a felhasználó számára látható tartalma. Figyelmen kívül hagyja a megjegyzéseket, de hibát jelez, ha az elem szóközt tartalmaz.

html

<span data-testid="not-empty"><span data-testid="empty"></span></span>
<span data-testid="with-whitespace"> </span>
<span data-testid="with-comment"><!-- comment --></span>

await expect.element(getByTestId('empty')).toBeEmptyDOMElement();
await expect.element(getByTestId('not-empty')).not.toBeEmptyDOMElement();
await expect.element(getByTestId('with-whitespace')).not.toBeEmptyDOMElement();

toBeInTheDocument

function toBeInTheDocument(): Promise<void>;

Ellenőrzi, hogy egy elem jelen van-e a dokumentumban vagy sem.

html

<svg data-testid="svg-element"></svg>

await expect.element(getByTestId('svg-element')).toBeInTheDocument();
await expect.element(getByTestId('does-not-exist')).not.toBeInTheDocument();

WARNING

Ez az összehasonlító nem talál leválasztott elemeket. Az elemet hozzá kell adni a dokumentumhoz, hogy a toBeInTheDocument megtalálja. Ha leválasztott elemben szeretne keresni, kérjük, használja a toContainElement.

toBeInvalid

function toBeInvalid(): Promise<void>;

Ez lehetővé teszi annak ellenőrzését, hogy egy elem jelenleg érvénytelen-e.

Egy elem érvénytelen, ha rendelkezik aria-invalid attribútummal érték nélkül vagy "true" értékkel, vagy ha a checkValidity() eredménye hamis.

html

<input data-testid="no-aria-invalid" />
<input data-testid="aria-invalid" aria-invalid />
<input data-testid="aria-invalid-value" aria-invalid="true" />
<input data-testid="aria-invalid-false" aria-invalid="false" />

<form data-testid="valid-form">
  <input />
</form>

<form data-testid="invalid-form">
  <input required />
</form>

await expect.element(getByTestId('no-aria-invalid')).not.toBeInvalid();
await expect.element(getByTestId('aria-invalid')).toBeInvalid();
await expect.element(getByTestId('aria-invalid-value')).toBeInvalid();
await expect.element(getByTestId('aria-invalid-false')).not.toBeInvalid();

await expect.element(getByTestId('valid-form')).not.toBeInvalid();
await expect.element(getByTestId('invalid-form')).toBeInvalid();

toBeRequired

function toBeRequired(): Promise<void>;

Ez lehetővé teszi annak ellenőrzését, hogy egy űrlap elem jelenleg kötelező-e.

Egy elem kötelező, ha rendelkezik required vagy aria-required="true" attribútummal.

html

<input data-testid="required-input" required />
<input data-testid="aria-required-input" aria-required="true" />
<input data-testid="conflicted-input" required aria-required="false" />
<input data-testid="aria-not-required-input" aria-required="false" />
<input data-testid="optional-input" />
<input data-testid="unsupported-type" type="image" required />
<select data-testid="select" required></select>
<textarea data-testid="textarea" required></textarea>
<div data-testid="supported-role" role="tree" required></div>
<div data-testid="supported-role-aria" role="tree" aria-required="true"></div>

await expect.element(getByTestId('required-input')).toBeRequired();
await expect.element(getByTestId('aria-required-input')).toBeRequired();
await expect.element(getByTestId('conflicted-input')).toBeRequired();
await expect.element(getByTestId('aria-not-required-input')).not.toBeRequired();
await expect.element(getByTestId('optional-input')).not.toBeRequired();
await expect.element(getByTestId('unsupported-type')).not.toBeRequired();
await expect.element(getByTestId('select')).toBeRequired();
await expect.element(getByTestId('textarea')).toBeRequired();
await expect.element(getByTestId('supported-role')).not.toBeRequired();
await expect.element(getByTestId('supported-role-aria')).toBeRequired();

toBeValid

function toBeValid(): Promise<void>;

Ez lehetővé teszi annak ellenőrzését, hogy egy elem értéke jelenleg érvényes-e.

Egy elem érvényes, ha nincs aria-invalid attribútuma, vagy az attribútum értéke "hamis". A checkValidity() eredményének is igaznak kell lennie, ha űrlap elemről van szó.

html

<input data-testid="no-aria-invalid" />
<input data-testid="aria-invalid" aria-invalid />
<input data-testid="aria-invalid-value" aria-invalid="true" />
<input data-testid="aria-invalid-false" aria-invalid="false" />

<form data-testid="valid-form">
  <input />
</form>

<form data-testid="invalid-form">
  <input required />
</form>

await expect.element(getByTestId('no-aria-invalid')).toBeValid();
await expect.element(getByTestId('aria-invalid')).not.toBeValid();
await expect.element(getByTestId('aria-invalid-value')).not.toBeValid();
await expect.element(getByTestId('aria-invalid-false')).toBeValid();

await expect.element(getByTestId('valid-form')).toBeValid();
await expect.element(getByTestId('invalid-form')).not.toBeValid();

toBeVisible

function toBeVisible(): Promise<void>;

Ez lehetővé teszi annak ellenőrzését, hogy egy elem jelenleg látható-e a felhasználó számára.

Az elem akkor tekinthető láthatónak, ha nem üres a határoló doboza, és nincs visibility:hidden számított stílusa.

Megjegyzendő, hogy ezen definíció szerint:

A nulla méretű elemek nem tekinthetők láthatónak.
A display:none stílusú elemek nem tekinthetők láthatónak.
Az opacity:0 stílusú elemek igenis tekinthetők láthatónak.

Annak ellenőrzéséhez, hogy a listából legalább egy elem látható-e, használja a locator.first().

// Egy adott elem látható.
await expect.element(page.getByText('Welcome')).toBeVisible();

// Legalább egy elem a listában látható.
await expect.element(page.getByTestId('todo-item').first()).toBeVisible();

// Legalább az egyik a két elemből látható, esetleg mindkettő.
await expect
  .element(
    page
      .getByRole('button', { name: 'Sign in' })
      .or(page.getByRole('button', { name: 'Sign up' }))
      .first()
  )
  .toBeVisible();

toContainElement

function toContainElement(
  element: HTMLElement | SVGElement | null
): Promise<void>;

Ez lehetővé teszi annak ellenőrzését, hogy egy elem tartalmaz-e egy másik elemet leszármazottként vagy sem.

html

<span data-testid="ancestor"><span data-testid="descendant"></span></span>

const ancestor = getByTestId('ancestor');
const descendant = getByTestId('descendant');
const nonExistantElement = getByTestId('does-not-exist');

await expect.element(ancestor).toContainElement(descendant);
await expect.element(descendant).not.toContainElement(ancestor);
await expect.element(ancestor).not.toContainElement(nonExistantElement);

toContainHTML

function toContainHTML(htmlText: string): Promise<void>;

Ellenőrzi, hogy egy HTML elemet reprezentáló string szerepel-e egy másik elemben. A stringnek érvényes HTML-t kell tartalmaznia, nem pedig hiányos HTML-t.

html

<span data-testid="parent"><span data-testid="child"></span></span>

// Ezek érvényes használatok
await expect
  .element(getByTestId('parent'))
  .toContainHTML('<span data-testid="child"></span>');
await expect
  .element(getByTestId('parent'))
  .toContainHTML('<span data-testid="child" />');
await expect.element(getByTestId('parent')).not.toContainHTML('<br />');

// Ezek nem fognak működni
await expect
  .element(getByTestId('parent'))
  .toContainHTML('data-testid="child"');
await expect.element(getByTestId('parent')).toContainHTML('data-testid');
await expect.element(getByTestId('parent')).toContainHTML('</span>');

WARNING

Valószínűleg nincs szüksége erre az összehasonlítóra. Javasoljuk, hogy a tesztelést abból a szempontból végezze, ahogyan a felhasználó érzékeli az alkalmazást a böngészőben. Ezért nem javasolt egy adott DOM struktúra ellen tesztelni.

Hasznos lehet olyan helyzetekben, amikor a tesztelt kód külső forrásból származó HTML-t renderel, és ellenőrizni szeretné, hogy az a HTML kód rendeltetésszerűen lett-e felhasználva.

Nem szabad a saját maga által vezérelt DOM struktúra ellenőrzésére használni. Kérjük, helyette a toContainElement használja.

toHaveAccessibleDescription

function toHaveAccessibleDescription(
  description?: string | RegExp
): Promise<void>;

Ez lehetővé teszi annak ellenőrzését, hogy egy elem rendelkezik-e a várt akadálymentes leírással.

Átadhatja a várt akadálymentes leírás pontos stringjét, vagy részleges egyezést is végezhet reguláris kifejezés megadásával, vagy az expect.stringContaining vagy expect.stringMatching használatával.

html

<a
  data-testid="link"
  href="/"
  aria-label="Home page"
  title="A link to start over"
  >Start</a
>
<a data-testid="extra-link" href="/about" aria-label="About page">About</a>
<img src="avatar.jpg" data-testid="avatar" alt="User profile pic" />
<img
  src="logo.jpg"
  data-testid="logo"
  alt="Company logo"
  aria-describedby="t1"
/>
<span id="t1" role="presentation">The logo of Our Company</span>
<img
  src="logo.jpg"
  data-testid="logo2"
  alt="Company logo"
  aria-description="The logo of Our Company"
/>

await expect.element(getByTestId('link')).toHaveAccessibleDescription();
await expect
  .element(getByTestId('link'))
  .toHaveAccessibleDescription('A link to start over');
await expect
  .element(getByTestId('link'))
  .not.toHaveAccessibleDescription('Home page');
await expect
  .element(getByTestId('extra-link'))
  .not.toHaveAccessibleDescription();
await expect.element(getByTestId('avatar')).not.toHaveAccessibleDescription();
await expect
  .element(getByTestId('logo'))
  .not.toHaveAccessibleDescription('Company logo');
await expect
  .element(getByTestId('logo'))
  .toHaveAccessibleDescription('The logo of Our Company');
await expect
  .element(getByTestId('logo2'))
  .toHaveAccessibleDescription('The logo of Our Company');

toHaveAccessibleErrorMessage

function toHaveAccessibleErrorMessage(message?: string | RegExp): Promise<void>;

Ez lehetővé teszi annak ellenőrzését, hogy egy elem rendelkezik-e a várt akadálymentes hibaüzenettel.

Átadhatja a várt akadálymentes hibaüzenet pontos stringjét. Alternatívaként részleges egyezést is végezhet reguláris kifejezés megadásával vagy az expect.stringContaining vagy expect.stringMatching használatával.

html

<input
  aria-label="Has Error"
  aria-invalid="true"
  aria-errormessage="error-message"
/>
<div id="error-message" role="alert">This field is invalid</div>

<input aria-label="No Error Attributes" />
<input
  aria-label="Not Invalid"
  aria-invalid="false"
  aria-errormessage="error-message"
/>

// Érvényes hibaüzenetekkel rendelkező beviteli mezők
await expect
  .element(getByRole('textbox', { name: 'Has Error' }))
  .toHaveAccessibleErrorMessage();
await expect
  .element(getByRole('textbox', { name: 'Has Error' }))
  .toHaveAccessibleErrorMessage('This field is invalid');
await expect
  .element(getByRole('textbox', { name: 'Has Error' }))
  .toHaveAccessibleErrorMessage(/invalid/i);
await expect
  .element(getByRole('textbox', { name: 'Has Error' }))
  .not.toHaveAccessibleErrorMessage('This field is absolutely correct!');

// Érvényes hibaüzenetek nélküli beviteli mezők
await expect
  .element(getByRole('textbox', { name: 'No Error Attributes' }))
  .not.toHaveAccessibleErrorMessage();

await expect
  .element(getByRole('textbox', { name: 'Not Invalid' }))
  .not.toHaveAccessibleErrorMessage();

toHaveAccessibleName

function toHaveAccessibleName(name?: string | RegExp): Promise<void>;

Ez lehetővé teszi annak ellenőrzését, hogy egy elem rendelkezik-e a várt akadálymentes névvel. Hasznos például annak ellenőrzésére, hogy az űrlap elemek és gombok megfelelően vannak-e címkézve.

Átadhatja a várt akadálymentes név pontos stringjét, vagy részleges egyezést is végezhet reguláris kifejezés megadásával, vagy az expect.stringContaining vagy expect.stringMatching használatával.

html

<img data-testid="img-alt" src="" alt="Test alt" />
<img data-testid="img-empty-alt" src="" alt="" />
<svg data-testid="svg-title"><title>Test title</title></svg>
<button data-testid="button-img-alt"><img src="" alt="Test" /></button>
<p><img data-testid="img-paragraph" src="" alt="" /> Test content</p>
<button data-testid="svg-button"><svg><title>Test</title></svg></p>
<div><svg data-testid="svg-without-title"></svg></div>
<input data-testid="input-title" title="test" />

javascript

await expect.element(getByTestId('img-alt')).toHaveAccessibleName('Test alt');
await expect.element(getByTestId('img-empty-alt')).not.toHaveAccessibleName();
await expect
  .element(getByTestId('svg-title'))
  .toHaveAccessibleName('Test title');
await expect.element(getByTestId('button-img-alt')).toHaveAccessibleName();
await expect.element(getByTestId('img-paragraph')).not.toHaveAccessibleName();
await expect.element(getByTestId('svg-button')).toHaveAccessibleName();
await expect
  .element(getByTestId('svg-without-title'))
  .not.toHaveAccessibleName();
await expect.element(getByTestId('input-title')).toHaveAccessibleName();

toHaveAttribute

function toHaveAttribute(attribute: string, value?: unknown): Promise<void>;

Ez lehetővé teszi annak ellenőrzését, hogy az adott elemnek van-e attribútuma. Opcionálisan ellenőrizheti azt is, hogy az attribútum rendelkezik-e egy adott várt értékkel, vagy részlegesen egyezik-e az expect.stringContaining vagy expect.stringMatching használatával.

html

<button data-testid="ok-button" type="submit" disabled>ok</button>

const button = getByTestId('ok-button');

await expect.element(button).toHaveAttribute('disabled');
await expect.element(button).toHaveAttribute('type', 'submit');
await expect.element(button).not.toHaveAttribute('type', 'button');

await expect
  .element(button)
  .toHaveAttribute('type', expect.stringContaining('sub'));
await expect
  .element(button)
  .toHaveAttribute('type', expect.not.stringContaining('but'));

toHaveClass

function toHaveClass(
  ...classNames: string[],
  options?: { exact: boolean }
): Promise<void>;
function toHaveClass(...classNames: (string | RegExp)[]): Promise<void>;

Ez lehetővé teszi annak ellenőrzését, hogy az adott elem rendelkezik-e bizonyos osztályokkal a class attribútumában. Legalább egy osztályt meg kell adnia, kivéve, ha azt állítja, hogy egy elemnek nincsenek osztályai.

Az osztálynevek listája tartalmazhat stringeket és reguláris kifejezéseket. A reguláris kifejezések az egyes osztályok ellen kerülnek összehasonlításra a cél elemben, és NEM a teljes class attribútum értékével szemben.

WARNING

Vegye figyelembe, hogy nem használhatja az exact: true opciót, ha csak reguláris kifejezések vannak megadva.

html

<button data-testid="delete-button" class="btn extra btn-danger">
  Delete item
</button>
<button data-testid="no-classes">No Classes</button>

const deleteButton = getByTestId('delete-button');
const noClasses = getByTestId('no-classes');

await expect.element(deleteButton).toHaveClass('extra');
await expect.element(deleteButton).toHaveClass('btn-danger btn');
await expect.element(deleteButton).toHaveClass(/danger/, 'btn');
await expect.element(deleteButton).toHaveClass('btn-danger', 'btn');
await expect.element(deleteButton).not.toHaveClass('btn-link');
await expect.element(deleteButton).not.toHaveClass(/link/);

// ⚠️ a regexp az egyes osztályok ellen egyezik, nem a teljes classList ellen
await expect.element(deleteButton).not.toHaveClass(/btn extra/);

// az elemnek PONTOSAN egy osztálykészlete van (bármilyen sorrendben)
await expect.element(deleteButton).toHaveClass('btn-danger extra btn', {
  exact: true,
});
// ha több van, mint a várt, akkor hibát fog jelezni
await expect.element(deleteButton).not.toHaveClass('btn-danger extra', {
  exact: true,
});

await expect.element(noClasses).not.toHaveClass();

toHaveFocus

function toHaveFocus(): Promise<void>;

Ez lehetővé teszi annak ellenőrzését, hogy egy elem fókuszban van-e vagy sem.

html

<div><input type="text" data-testid="element-to-focus" /></div>

const input = page.getByTestId('element-to-focus');
input.element().focus();
await expect.element(input).toHaveFocus();
input.element().blur();
await expect.element(input).not.toHaveFocus();

toHaveFormValues

function toHaveFormValues(
  expectedValues: Record<string, unknown>
): Promise<void>;

Ez lehetővé teszi annak ellenőrzését, hogy egy űrlap vagy mezőcsoport tartalmaz-e űrlapvezérlőket minden megadott névhez, és rendelkezik-e a megadott értékkel.

TIP

Fontos hangsúlyozni, hogy ez az összehasonlító csak egy űrlap vagy egy mezőcsoport elemen hívható meg.

Ez lehetővé teszi, hogy kihasználja az form és fieldset elemek .elements tulajdonságát, hogy megbízhatóan lekérje az összes űrlapvezérlőt bennük.

Ez elkerüli azt a lehetőséget is, hogy a felhasználók olyan tárolót biztosítsanak, amely több űrlapot tartalmaz, ezáltal összekeverve az egymással nem összefüggő, sőt akár egymással ütköző űrlapvezérlőket.

Ez az összehasonlító elvonatkoztatja az űrlapvezérlő értékének megszerzésének sajátosságait az űrlapvezérlő típusától függően. Például az <input> elemeknek van value attribútumuk, de a <select> elemeknek nincs. Íme az összes lefedett eset listája:

Az <input type="number"> elemek az értéket számként adják vissza, nem stringként.
Az <input type="checkbox"> elemek:
- ha egyetlen van a megadott name attribútummal, akkor logikai érték-ként kezelik, igaz értéket ad vissza, ha a jelölőnégyzet be van jelölve, hamis értéket, ha nincs bejelölve.
- ha több jelölőnégyzet van ugyanazzal a name attribútummal, akkor mindegyiket egyetlen űrlapvezérlőként kezelik, amely az értéket tömbként adja vissza, amely tartalmazza a kiválasztott jelölőnégyzetek összes értékét a gyűjteményben.
Az <input type="radio"> elemeket mind a name attribútum csoportosítja, és az ilyen csoportot egyetlen űrlapvezérlőként kezelik. Ez az űrlapvezérlő az értéket stringként adja vissza, amely a kiválasztott rádiógomb value attribútumának felel meg a csoporton belül.
Az <input type="text"> elemek az értéket stringként adják vissza. Ez vonatkozik azokra az <input> elemekre is, amelyek bármilyen más lehetséges type attribútummal rendelkeznek, amelyet a fenti szabályok nem fednek le (pl. search, email, date, password, hidden, stb.)
A multiple attribútum nélküli <select> elemek az értéket stringként adják vissza, amely a kiválasztott option value attribútumának felel meg, vagy nem definiált értéket, ha nincs kiválasztott opció.
A <select multiple> elemek az értéket tömbként adják vissza, amely tartalmazza a kiválasztott opciók összes értékét.
A <textarea> elemek az értéküket stringként adják vissza. Az érték a csomópont tartalmának felel meg.

A fenti szabályok megkönnyítik például az egyetlen kiválasztó vezérlőről rádiógombok csoportjára való átállást. Vagy a többszörös kiválasztó vezérlőről jelölőnégyzetek csoportjára való átállást. Az összehasonlításhoz használt űrlapértékek halmaza ugyanaz marad.

html

<form data-testid="login-form">
  <input type="text" name="username" value="jane.doe" />
  <input type="password" name="password" value="12345678" />
  <input type="checkbox" name="rememberMe" checked />
  <button type="submit">Sign in</button>
</form>

await expect.element(getByTestId('login-form')).toHaveFormValues({
  username: 'jane.doe',
  rememberMe: true,
});

toHaveStyle

function toHaveStyle(css: string | Partial<CSSStyleDeclaration>): Promise<void>;

Ez lehetővé teszi annak ellenőrzését, hogy egy adott elem rendelkezik-e bizonyos CSS tulajdonságokkal, meghatározott értékekkel. Csak akkor egyezik, ha az elem rendelkezik összes várt tulajdonsággal, nem csupán néhányukkal.

html

<button
  data-testid="delete-button"
  style="display: none; background-color: red"
>
  Delete item
</button>

const button = getByTestId('delete-button');

await expect.element(button).toHaveStyle('display: none');
await expect.element(button).toHaveStyle({ display: 'none' });
await expect.element(button).toHaveStyle(`
  background-color: red;
  display: none;
`);
await expect.element(button).toHaveStyle({
  backgroundColor: 'red',
  display: 'none',
});
await expect.element(button).not.toHaveStyle(`
  background-color: blue;
  display: none;
`);
await expect.element(button).not.toHaveStyle({
  backgroundColor: 'blue',
  display: 'none',
});

Ez működik olyan szabályokkal is, amelyek egy osztálynéven keresztül vannak alkalmazva az elemre, és amelyekhez bizonyos szabályok vannak definiálva a dokumentumban jelenleg aktív stíluslapban. A szokásos CSS prioritási szabályok érvényesek.

toHaveTextContent

function toHaveTextContent(
  text: string | RegExp,
  options?: { normalizeWhitespace: boolean }
): Promise<void>;

Ez lehetővé teszi annak ellenőrzését, hogy az adott csomópont rendelkezik-e szöveges tartalommal vagy sem. Ez támogatja az elemeket, de a szöveges csomópontokat és a fragmentumokat is.

Ha string argumentumot adunk át, akkor részleges, kis- és nagybetűérzékeny egyezést fog végezni a csomópont tartalmával.

A kis- és nagybetűérzéketlen egyezéshez használhat RegExp-et a /i módosítóval.

Ha a teljes tartalomra szeretne egyezni, használhat RegExp-et.

html

<span data-testid="text-content">Text Content</span>

const element = getByTestId('text-content');

await expect.element(element).toHaveTextContent('Content');
// a teljes tartalom egyeztetéséhez
await expect.element(element).toHaveTextContent(/^Text Content$/);
// kis- és nagybetűérzéketlen egyezéshez
await expect.element(element).toHaveTextContent(/content$/i);
await expect.element(element).not.toHaveTextContent('content');

toHaveValue

function toHaveValue(value: string | string[] | number | null): Promise<void>;

Ez lehetővé teszi annak ellenőrzését, hogy az adott űrlap elem rendelkezik-e a megadott értékkel. Elfogad <input>, <select> és <textarea> elemeket, kivéve az <input type="checkbox"> és <input type="radio"> elemeket, amelyek csak a toBeChecked vagy toHaveFormValues használatával egyeztethetők értelmesen.

Elfogadja továbbá a meter, progressbar, slider vagy spinbutton szerepkörű elemeket, és ellenőrzi az aria-valuenow attribútumukat (számként).

Minden más űrlap elem esetében az érték egyezése ugyanazzal az algoritmussal történik, mint a toHaveFormValues esetében.

html

<input type="text" value="text" data-testid="input-text" />
<input type="number" value="5" data-testid="input-number" />
<input type="text" data-testid="input-empty" />
<select multiple data-testid="select-number">
  <option value="first">First Value</option>
  <option value="second" selected>Second Value</option>
  <option value="third" selected>Third Value</option>
</select>

const textInput = getByTestId('input-text');
const numberInput = getByTestId('input-number');
const emptyInput = getByTestId('input-empty');
const selectInput = getByTestId('select-number');

await expect.element(textInput).toHaveValue('text');
await expect.element(numberInput).toHaveValue(5);
await expect.element(emptyInput).not.toHaveValue();
await expect.element(selectInput).toHaveValue(['second', 'third']);

toHaveDisplayValue

typescript

function toHaveDisplayValue(
  value: string | RegExp | (string | RegExp)[]
): Promise<void>;

Ez lehetővé teszi annak ellenőrzését, hogy az adott űrlap elem rendelkezik-e a megadott megjelenített értékkel (azzal, amit a végfelhasználó látni fog). Elfogad <input>, <select> és <textarea> elemeket, kivéve az <input type="checkbox"> és <input type="radio"> elemeket, amelyek csak a toBeChecked vagy toHaveFormValues használatával egyeztethetők értelmesen.

html

<label for="input-example">First name</label>
<input type="text" id="input-example" value="Luca" />

<label for="textarea-example">Description</label>
<textarea id="textarea-example">An example description here.</textarea>

<label for="single-select-example">Fruit</label>
<select id="single-select-example">
  <option value="">Select a fruit...</option>
  <option value="banana">Banana</option>
  <option value="ananas">Ananas</option>
  <option value="avocado">Avocado</option>
</select>

<label for="multiple-select-example">Fruits</label>
<select id="multiple-select-example" multiple>
  <option value="">Select a fruit...</option>
  <option value="banana" selected>Banana</option>
  <option value="ananas">Ananas</option>
  <option value="avocado" selected>Avocado</option>
</select>

const input = page.getByLabelText('First name');
const textarea = page.getByLabelText('Description');
const selectSingle = page.getByLabelText('Fruit');
const selectMultiple = page.getByLabelText('Fruits');

await expect.element(input).toHaveDisplayValue('Luca');
await expect.element(input).toHaveDisplayValue(/Luc/);
await expect
  .element(textarea)
  .toHaveDisplayValue('An example description here.');
await expect.element(textarea).toHaveDisplayValue(/example/);
await expect.element(selectSingle).toHaveDisplayValue('Select a fruit...');
await expect.element(selectSingle).toHaveDisplayValue(/Select/);
await expect.element(selectMultiple).toHaveDisplayValue([/Avocado/, 'Banana']);

toBeChecked

function toBeChecked(): Promise<void>;

Ez lehetővé teszi annak ellenőrzését, hogy az adott elem be van-e jelölve. Elfogad checkbox vagy radio típusú input elemeket, valamint checkbox, radio vagy switch szerepkörű elemeket érvényes aria-checked attribútummal ("igaz" vagy "hamis").

html

<input type="checkbox" checked data-testid="input-checkbox-checked" />
<input type="checkbox" data-testid="input-checkbox-unchecked" />
<div role="checkbox" aria-checked="true" data-testid="aria-checkbox-checked" />
<div
  role="checkbox"
  aria-checked="false"
  data-testid="aria-checkbox-unchecked"
/>

<input type="radio" checked value="foo" data-testid="input-radio-checked" />
<input type="radio" value="foo" data-testid="input-radio-unchecked" />
<div role="radio" aria-checked="true" data-testid="aria-radio-checked" />
<div role="radio" aria-checked="false" data-testid="aria-radio-unchecked" />
<div role="switch" aria-checked="true" data-testid="aria-switch-checked" />
<div role="switch" aria-checked="false" data-testid="aria-switch-unchecked" />

const inputCheckboxChecked = getByTestId('input-checkbox-checked');
const inputCheckboxUnchecked = getByTestId('input-checkbox-unchecked');
const ariaCheckboxChecked = getByTestId('aria-checkbox-checked');
const ariaCheckboxUnchecked = getByTestId('aria-checkbox-unchecked');
await expect.element(inputCheckboxChecked).toBeChecked();
await expect.element(inputCheckboxUnchecked).not.toBeChecked();
await expect.element(ariaCheckboxChecked).toBeChecked();
await expect.element(ariaCheckboxUnchecked).not.toBeChecked();

const inputRadioChecked = getByTestId('input-radio-checked');
const inputRadioUnchecked = getByTestId('input-radio-unchecked');
const ariaRadioChecked = getByTestId('aria-radio-checked');
const ariaRadioUnchecked = getByTestId('aria-radio-unchecked');
await expect.element(inputRadioChecked).toBeChecked();
await expect.element(inputRadioUnchecked).not.toBeChecked();
await expect.element(ariaRadioChecked).toBeChecked();
await expect.element(ariaRadioUnchecked).not.toBeChecked();

const ariaSwitchChecked = getByTestId('aria-switch-checked');
const ariaSwitchUnchecked = getByTestId('aria-switch-unchecked');
await expect.element(ariaSwitchChecked).toBeChecked();
await expect.element(ariaSwitchUnchecked).not.toBeChecked();

toBePartiallyChecked

typescript

function toBePartiallyChecked(): Promise<void>;

Ez lehetővé teszi annak ellenőrzését, hogy az adott elem részben be van-e jelölve. Elfogad checkbox típusú input elemeket és checkbox szerepkörű elemeket aria-checked="mixed" attribútummal, vagy checkbox típusú input elemeket indeterminate értékkel igazra állítva.

html

<input type="checkbox" aria-checked="mixed" data-testid="aria-checkbox-mixed" />
<input type="checkbox" checked data-testid="input-checkbox-checked" />
<input type="checkbox" data-testid="input-checkbox-unchecked" />
<div role="checkbox" aria-checked="true" data-testid="aria-checkbox-checked" />
<div
  role="checkbox"
  aria-checked="false"
  data-testid="aria-checkbox-unchecked"
/>
<input type="checkbox" data-testid="input-checkbox-indeterminate" />

const ariaCheckboxMixed = getByTestId('aria-checkbox-mixed');
const inputCheckboxChecked = getByTestId('input-checkbox-checked');
const inputCheckboxUnchecked = getByTestId('input-checkbox-unchecked');
const ariaCheckboxChecked = getByTestId('aria-checkbox-checked');
const ariaCheckboxUnchecked = getByTestId('aria-checkbox-unchecked');
const inputCheckboxIndeterminate = getByTestId('input-checkbox-indeterminate');

await expect.element(ariaCheckboxMixed).toBePartiallyChecked();
await expect.element(inputCheckboxChecked).not.toBePartiallyChecked();
await expect.element(inputCheckboxUnchecked).not.toBePartiallyChecked();
await expect.element(ariaCheckboxChecked).not.toBePartiallyChecked();
await expect.element(ariaCheckboxUnchecked).not.toBePartiallyChecked();

inputCheckboxIndeterminate.element().indeterminate = true;
await expect.element(inputCheckboxIndeterminate).toBePartiallyChecked();

toHaveRole

function toHaveRole(role: ARIARole): Promise<void>;

Ez lehetővé teszi annak ellenőrzését, hogy egy elem rendelkezik-e a várt szerepkörrel.

Ez hasznos olyan esetekben, amikor már hozzáfér egy elemhez valamilyen lekérdezésen keresztül, amely nem maga a szerepkör, és további ellenőrzéseket szeretne végezni az akadálymentességével kapcsolatban.

A szerepkör egyezhet explicit szerepkörrel (a role attribútumon keresztül), vagy implicit szerepkörrel az implicit ARIA szemantika alapján.

html

<button data-testid="button">Continue</button>
<div role="button" data-testid="button-explicit">Continue</button>
<button role="switch button" data-testid="button-explicit-multiple">Continue</button>
<a href="/about" data-testid="link">About</a>
<a data-testid="link-invalid">Invalid link<a/>

await expect.element(getByTestId('button')).toHaveRole('button');
await expect.element(getByTestId('button-explicit')).toHaveRole('button');
await expect
  .element(getByTestId('button-explicit-multiple'))
  .toHaveRole('button');
await expect
  .element(getByTestId('button-explicit-multiple'))
  .toHaveRole('switch');
await expect.element(getByTestId('link')).toHaveRole('link');
await expect.element(getByTestId('link-invalid')).not.toHaveRole('link');
await expect.element(getByTestId('link-invalid')).toHaveRole('generic');

WARNING

A szerepkörök szó szerint, string egyezéssel kerülnek összehasonlításra, az ARIA szerepkör hierarchia öröklése nélkül. Ennek eredményeként egy szuperosztály szerepkör, mint például a checkbox lekérdezése nem fogja tartalmazni az alosztály szerepkörrel rendelkező elemeket, mint például a switch.

Vegye figyelembe azt is, hogy a testing-library-vel ellentétben a Vitest figyelmen kívül hagyja az összes egyéni szerepkört, kivéve az első érvényeset, követve a Playwright viselkedését:

jsx

<div data-testid="switch" role="switch alert"></div>;

await expect.element(getByTestId('switch')).toHaveRole('switch'); // ✅
await expect.element(getByTestId('switch')).toHaveRole('alert'); // ❌

toHaveSelection

function toHaveSelection(selection?: string): Promise<void>;

Ez lehetővé teszi annak ellenőrzését, hogy egy elem rendelkezik-e szövegkijelöléssel.

Ez hasznos annak ellenőrzésére, hogy egy szöveg vagy a szöveg egy része ki van-e jelölve egy elemen belül. Az elem lehet szöveges típusú beviteli mező, szövegterület, vagy bármely más szöveget tartalmazó elem, például bekezdés, span, div stb.

WARNING

A várt kijelölés egy string, nem teszi lehetővé a kijelölési tartomány indexeinek ellenőrzését.

html

<div>
  <input type="text" value="text selected text" data-testid="text" />
  <textarea data-testid="textarea">text selected text</textarea>
  <p data-testid="prev">prev</p>
  <p data-testid="parent">
    text <span data-testid="child">selected</span> text
  </p>
  <p data-testid="next">next</p>
</div>

getByTestId('text').element().setSelectionRange(5, 13);
await expect.element(getByTestId('text')).toHaveSelection('selected');

getByTestId('textarea').element().setSelectionRange(0, 5);
await expect.element('textarea').toHaveSelection('text ');

const selection = document.getSelection();
const range = document.createRange();
selection.removeAllRanges();
selection.empty();
selection.addRange(range);

// a gyermek kijelölése a szülőre is vonatkozik
range.selectNodeContents(getByTestId('child').element());
await expect.element(getByTestId('child')).toHaveSelection('selected');
await expect.element(getByTestId('parent')).toHaveSelection('selected');

// kijelölés, amely a "prev" elemre, a szülő szövegére a gyermek előtt, és a gyermek egy részére vonatkozik.
range.setStart(getByTestId('prev').element(), 0);
range.setEnd(getByTestId('child').element().childNodes[0], 3);
await expect.element(queryByTestId('prev')).toHaveSelection('prev');
await expect.element(queryByTestId('child')).toHaveSelection('sel');
await expect.element(queryByTestId('parent')).toHaveSelection('text sel');
await expect.element(queryByTestId('next')).not.toHaveSelection();

// kijelölés, amely a gyermek egy részére, a szülő szövegére a gyermek után, és a "next" elem egy részére vonatkozik.
range.setStart(getByTestId('child').element().childNodes[0], 3);
range.setEnd(getByTestId('next').element().childNodes[0], 2);
await expect.element(queryByTestId('child')).toHaveSelection('ected');
await expect.element(queryByTestId('parent')).toHaveSelection('ected text');
await expect.element(queryByTestId('prev')).not.toHaveSelection();
await expect.element(queryByTestId('next')).toHaveSelection('ne');

Állítási API ​

toBeDisabled ​

toBeEnabled ​

toBeEmptyDOMElement ​

toBeInTheDocument ​

toBeInvalid ​

toBeRequired ​

toBeValid ​

toBeVisible ​

toContainElement ​

toContainHTML ​

toHaveAccessibleDescription ​

toHaveAccessibleErrorMessage ​

toHaveAccessibleName ​

toHaveAttribute ​

toHaveClass ​

toHaveFocus ​

toHaveFormValues ​

toHaveStyle ​

toHaveTextContent ​

toHaveValue ​

toHaveDisplayValue ​

toBeChecked ​

toBePartiallyChecked ​

toHaveRole ​

toHaveSelection ​

Állítási API

toBeDisabled

toBeEnabled

toBeEmptyDOMElement

toBeInTheDocument

toBeInvalid

toBeRequired

toBeValid

toBeVisible

toContainElement

toContainHTML

toHaveAccessibleDescription

toHaveAccessibleErrorMessage

toHaveAccessibleName

toHaveAttribute

toHaveClass

toHaveFocus

toHaveFormValues

toHaveStyle

toHaveTextContent

toHaveValue

toHaveDisplayValue

toBeChecked

toBePartiallyChecked

toHaveRole

toHaveSelection