API asercji
Vitest zawiera bibliotekę @testing-library/jest-dom
, która zapewnia szeroki zakres gotowych asercji DOM. Szczegółową dokumentację można znaleźć w pliku 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
Jeśli używasz TypeScript lub chcesz mieć poprawne podpowiedzi typów w expect
, upewnij się, że w pliku tsconfig
masz określone @vitest/browser/providers/playwright
lub @vitest/browser/providers/webdriverio
, w zależności od używanego dostawcy. Jeśli używasz domyślnego dostawcy preview
, możesz zamiast tego określić @vitest/browser/matchers
.
{
"compilerOptions": {
"types": ["@vitest/browser/matchers"]
}
}
{
"compilerOptions": {
"types": ["@vitest/browser/providers/playwright"]
}
}
{
"compilerOptions": {
"types": ["@vitest/browser/providers/webdriverio"]
}
}
Testy w przeglądarce mogą być niestabilne ze względu na ich asynchroniczny charakter. Z tego powodu ważne jest, aby mieć sposób na zapewnienie, że asercje będą udane, nawet jeśli warunek jest opóźniony (na przykład przez timeout, żądanie sieciowe lub animację). W tym celu Vitest zapewnia asercje z wbudowaną możliwością ponawiania za pomocą API expect.poll
i expect.element
:
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
expect.element
jest skrótem dla expect.poll(() => element)
i działa w ten sam sposób.
toHaveTextContent
i wszystkie inne asercje @testing-library/jest-dom
są nadal dostępne w standardowym expect
bez wbudowanego mechanizmu ponawiania:
// will fail immediately if .textContent is not `'Error!'`
expect(banner).toHaveTextContent('Error!');