@ 前端测试/ vitest- browser- navigate

Vitest浏览器模式的浏览器导航命令. 通过更新浏览器历史并发送流行态事件来模拟SPA导航.

特征

• 🧭 SPA 导航 - 在浏览器测试中进行程序导航
• 🎭 剧作家支持 - 与 @vitest/browser-playwright
• 🚗 网络司机支持 - 与 @vitest/browser-webdriverio
• 📦 类型脚本 - 自动提供全套支持 commands.navigate() 类型

安装

npm install -D @frontend-testing/vitest-browser-navigate

同伴依赖关系 : vitest >= 4.0.0

快速启动

1. 配置维特

// vitest.config.ts
import { navigate } from "@frontend-testing/vitest-browser-navigate";
import { defineConfig } from "vitest/config";

export default defineConfig({
  test: {
    browser: {
      enabled: true,
      provider: "playwright", // or "webdriverio"
      instances: [{ browser: "chromium" }],
      commands: { navigate },
    },
  },
});

2. 测试中的使用

import { commands } from "vitest/browser";

describe("MyPage", () => {
  it("navigates to dashboard", async () => {
    await commands.navigate("/dashboard");
    expect(window.location.pathname).toBe("/dashboard");
  });
});

类型脚本支持

类型 commands.navigate() 自动包含。 如果您的 IDE 不识别类型, 请添加副作用导入 :

选项A:在测试设置文件中( 建议)

// src/test/setup.ts
import "@frontend-testing/vitest-browser-navigate";
// ... rest of your setup

选择B:在单个测试文件中

// my-component.spec.tsx
import "@frontend-testing/vitest-browser-navigate";
import { commands } from "vitest/browser";

// Now commands.navigate() has full type support
await commands.navigate("/dashboard");

说明: 添加导入后, 您可能需要重新启动您的 TypeScript 服务器(Cmd+Shift+P ~"TypeScript:重新启动TS服务器".

API 密码

commands.navigate(path: string): Promise<void>

导航到指定的路径:

1. 通话 window.history.pushState()
2. 调度a popstate 事件( 触发 SPA 路由器, 如 React 路由器)
3. 等待浏览器处理导航

// Basic navigation
await commands.navigate("/login");

// With route parameters
await commands.navigate("/users/123");

// With query parameters
await commands.navigate("/search?q=test&page=1");

如何运作

命令在浏览器上下文中执行并模拟导航,而无需完整页面再加载 - 准确的SPA路由器如何工作. 这使得它非常适合测试React Router,Vue Router,或任何其他客户端的路由解决方案.

许可证

麻省理工学院