Assertion API

Vitest 捆绑了 @testing-library/jest-dom库，以提供各种开箱即用的 DOM 断言。有关详细文档，请阅读 jest-dom readme：

如果我们使用 TypeScript 或希望在 expect 中获得正确的类型提示，请确保我们的 setup 文件或 config 文件中引用了 @vitest/browser/providers/playwright 或 @vitest/browser/providers/webdriverio ，具体取决于我们使用的 provider 。如果我们使用的是默认的preview provider ，我们可以改为指定 @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 通过 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 = await 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!')

Assertion API ​

Assertion API