API утверждений

Vitest включает библиотеку @testing-library/jest-dom, предоставляя широкий спектр готовых к использованию утверждений для DOM. Подробную документацию можно найти в файле README jest-dom:

Если вы используете TypeScript или хотите иметь корректные типы в expect, убедитесь, что в вашем tsconfig указан либо @vitest/browser/providers/playwright, либо @vitest/browser/providers/webdriverio, в зависимости от выбранного провайдера. Если вы используете провайдер по умолчанию preview, вместо этого можно указать @vitest/browser/matchers.

previewplaywrightwebdriverio

json

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

json

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

json

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

Тесты в браузере могут давать нестабильные результаты из-за асинхронной природы. Поэтому важно гарантировать успешное выполнение проверок, даже если выполнение условия задерживается (например, из-за тайм-аута, сетевого запроса или анимации). Для этой цели Vitest предоставляет повторяемые утверждения, готовые к использованию, через API expect.poll и expect.element:

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

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

  // @testing-library предоставляет запросы со встроенной поддержкой повторных попыток
  // Он будет искать баннер до его отрисовки.
  const banner = page.getByRole('alert', {
    name: /error/i,
  });

  // Vitest предоставляет `expect.element` со встроенной поддержкой повторных попыток
  // Он будет проверять `element.textContent` до тех пор, пока его значение не станет "Error!"
  await expect.element(banner).toHaveTextContent('Error!');
});

TIP

expect.element - это сокращение от expect.poll(() => element) и работает точно так же.

toHaveTextContent и все другие утверждения @testing-library/jest-dom по-прежнему доступны в стандартном expect без встроенной поддержки повторных попыток:

// сразу же завершится сбоем, если .textContent не равен `'Error!'`
expect(banner).toHaveTextContent('Error!');

API утверждений ​

API утверждений