Vitest

英语

简体中文

英语

简体中文

外观

浏览器模式 实验性 ​

此页面提供有关 Vitest API 中实验性浏览器模式功能的信息，该功能允许您在浏览器中本地运行测试，从而可以访问浏览器全局变量，例如 window 和 document。此功能目前正在开发中，API 可能会在将来发生变化。

浏览器兼容性 ​

Vitest 使用 Vite 开发服务器 运行您的测试，因此我们只支持 esbuild.target 选项（默认情况下为 esnext）中指定的特性。

默认情况下，Vite 针对支持原生 ES 模块、原生 ESM 动态导入 和 import.meta 的浏览器。除此之外，我们还利用 BroadcastChannel 在 iframe 之间进行通信

  • Chrome >=87
  • Firefox >=78
  • Safari >=15.4
  • Edge >=88

动机 ​

我们开发了 Vitest 浏览器模式功能，以帮助改进测试工作流程并获得更准确、更可靠的测试结果。此测试 API 的实验性添加允许开发人员在原生浏览器环境中运行测试。在本节中，我们将探讨此功能背后的动机及其对测试的好处。

不同的测试方法 ​

有不同的方法来测试 JavaScript 代码。一些测试框架在 Node.js 中模拟浏览器环境，而另一些则在真实的浏览器中运行测试。在这种情况下，jsdom 是一个规范实现的示例，它通过与 Jest 或 Vitest 等测试运行器一起使用来模拟浏览器环境，而其他测试工具，例如 WebdriverIO 或 Cypress 允许开发人员在真实的浏览器中测试他们的应用程序，或者在 Playwright 的情况下，为您提供一个浏览器引擎。

模拟的注意事项 ​

在模拟环境（如 jsdom 或 happy-dom）中测试 JavaScript 程序简化了测试设置并提供了一个易于使用的 API，使其适用于许多项目并提高了对测试结果的信心。但是，必须牢记，这些工具只模拟浏览器环境，而不是实际的浏览器，这可能会导致模拟环境和真实环境之间存在一些差异。因此，测试结果中可能会出现误报或漏报。

为了在测试中获得最高级别的信心，在真实的浏览器环境中进行测试至关重要。这就是我们在 Vitest 中开发浏览器模式功能的原因，它允许开发人员在浏览器中本地运行测试，并获得更准确、更可靠的测试结果。通过浏览器级测试，开发人员可以更有信心他们的应用程序将在现实世界场景中按预期工作。

缺点 ​

使用 Vitest 浏览器时，请务必考虑以下缺点

早期开发 ​

Vitest 的浏览器模式功能仍处于开发的早期阶段。因此，它可能尚未完全优化，并且可能存在一些尚未解决的错误或问题。建议用户使用独立的浏览器端测试运行器（如 WebdriverIO、Cypress 或 Playwright）来增强他们的 Vitest 浏览器体验。

初始化时间更长 ​

Vitest 浏览器需要在初始化过程中启动提供程序和浏览器，这可能需要一些时间。与其他测试模式相比，这会导致更长的初始化时间。

配置 ​

要在 Vitest 配置中激活浏览器模式，您可以使用 --browser 标志或在 Vitest 配置文件中将 browser.enabled 字段设置为 true。以下是如何使用浏览器字段的配置示例

ts
export default defineConfig({
  test: {
    browser: {
      enabled: true,
      name: 'chrome', // browser name is required
    },
  }
})

浏览器选项类型 ​

Vitest 中的浏览器选项取决于提供程序。如果您传递 --browser 并且未在配置文件中指定其名称，Vitest 将失败。可用选项

  • webdriverio（默认）支持以下浏览器
    • firefox
    • chrome
    • edge
    • safari
  • playwright 支持以下浏览器
    • firefox
    • webkit
    • chromium

跨浏览器测试 ​

在浏览器选项中指定浏览器名称时，Vitest 将尝试默认使用 WebdriverIO 运行指定的浏览器，然后在那里运行测试。此功能使跨浏览器测试易于在 CI 等环境中使用和配置。如果您不想使用 WebdriverIO，则可以使用 browser.provider 选项配置自定义浏览器提供程序。

要使用 CLI 指定浏览器，请使用 --browser 标志，后跟浏览器名称，如下所示

sh
npx vitest --browser=chrome

或者，您可以使用点表示法向 CLI 提供浏览器选项

sh
npx vitest --browser.name=chrome --browser.headless

注意

在 WebdriverIO 中使用 Safari 浏览器选项时，需要通过在设备上运行 sudo safaridriver --enable 来激活 safaridriver。

此外，在运行测试时，Vitest 将尝试安装一些驱动程序以与 safaridriver 兼容。

无头模式 ​

无头模式是浏览器模式中提供的另一个选项。在无头模式下，浏览器在后台运行，没有用户界面，这使其适用于运行自动化测试。Vitest 中的无头选项可以设置为布尔值以启用或禁用无头模式。

以下是如何启用无头模式的配置示例

ts
export default defineConfig({
  test: {
    browser: {
      enabled: true,
      headless: true,
    },
  }
})

您也可以使用 CLI 中的 --browser.headless 标志设置无头模式，如下所示

sh
npx vitest --browser.name=chrome --browser.headless

在这种情况下，Vitest 将使用 Chrome 浏览器在无头模式下运行。

限制 ​

线程阻塞对话框 ​

使用 Vitest 浏览器时，请注意，无法本地使用线程阻塞对话框，例如 alert 或 confirm。这是因为它们会阻塞网页，这意味着 Vitest 无法继续与页面通信，导致执行挂起。

在这种情况下，Vitest 为这些 API 提供默认模拟，并使用默认返回值。这确保了如果用户意外使用同步弹出式网页 API，执行不会挂起。但是，仍然建议用户模拟这些网页 API 以获得更好的体验。在 模拟 中了解更多信息。