斷言 API

Vitest 捆綁了 @testing-library/jest-dom 函式庫，以提供隨裝即用的各種 DOM 斷言。如需詳細的文件，您可以閱讀 jest-dom 的 README：

• 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

如果您使用 TypeScript 或希望在 expect 中取得正確的型別提示，請確保您的 tsconfig 中指定了 @vitest/browser/providers/playwright 或 @vitest/browser/providers/webdriverio，具體取決於您使用的提供者。如果您使用預設的 preview 提供者，則可以改為指定 @vitest/browser/matchers。

preview

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

playwright

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

webdriverio

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

瀏覽器中的測試由於其非同步特性，可能會出現不一致的失敗。因此，重要的是要有一種方法來確保即使條件延遲（例如，由於超時、網路請求或動畫），斷言也能成功。為此，Vitest 透過 expect.poll 和 expect.element API 隨裝即用提供了可重試的斷言：

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

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

  // @testing-library 提供了內建重試機制的查詢方法
  // 它會持續尋找 banner 直到其被渲染
  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!');