OpenScreen 如何为依赖真实浏览器 API 的代码编写 Vitest 浏览器测试？

OpenScreen 如何为依赖真实浏览器 API 的代码编写 Vitest 浏览器测试【免费下载链接】openscreenCreate stunning demos for free. Open-source, no subscriptions, no watermarks, and free for commercial use. An alternative to Screen Studio.项目地址: https://gitcode.com/GitHub_Trending/open/openscreenOpenScreen 的测试体系由两套相互独立的 Vitest 配置组成一套跑在 jsdom模拟 DOM、没有真实浏览器里另一套通过 Playwright 驱动真实 Chromium。当被测代码依赖 jsdom 没有实现的真实浏览器 API——VideoDecoder、VideoEncoder、MediaRecorder、OffscreenCanvas、WebGL等——时就必须把测试写成浏览器测试。这篇基于 docs/tests/writing-tests.md 说明完整的操作路径判断、写文件、加载素材、运行与验证。先判断这段代码该进哪套测试文档给出的选型依据如下情况使用纯函数 / 数据转换单元测试jsdomi18n key 覆盖单元测试React hook 逻辑不依赖真实浏览器 API单元测试VideoDecoder/VideoEncoder/MediaRecorder浏览器测试OffscreenCanvas/ WebGL / Pixi.js 渲染浏览器测试文件导出产生真实Blob浏览器测试两套配置的划分靠文件命名完成这也是浏览器测试的第一道门槛浏览器测试文件名必须以.browser.test.ts或.tsx结尾且位于src/**下。vitest.browser.config.ts 的include就是src/**/*.browser.test.{ts,tsx}。单元测试vitest.config.ts 的include是{src,electron}/**/*.{test,spec}...同时exclude掉了src/**/*.browser.test.{ts,tsx}所以npm run test不会误跑浏览器测试。文件放置规则命名为subject.browser.test.ts放在被测源码旁边。例如 videoExporter.browser.test.ts 就与 videoExporter.ts 同目录。检查浏览器测试配置vitest.browser.config.ts 的关键字段节选export default defineConfig({ test: { include: [src/**/*.browser.test.{ts,tsx}], browser: { enabled: true, provider: playwright({ launch: { // Software WebGL so Pixi.js works in headless CI without a GPU. args: [--enable-unsafe-swiftshader, --use-glswiftshader], }, }), headless: true, instances: [{ browser: chromium }], }, testTimeout: 120_000, hookTimeout: 30_000, }, resolve: { alias: { : path.resolve(__dirname, src), }, }, assetsInclude: [**/*.webm], });对写测试有直接影响的是这几项测试在 headless Chromium 中执行启动参数--enable-unsafe-swiftshader、--use-glswiftshader启用软件 WebGL让 Pixi.js 在无 GPU 的 CI 环境可以运行。每个测试默认超时 120 秒每个 hook 30 秒。导出类操作很慢超时设置就是为此留的余量。别名解析到src/测试里可以直接写import { ... } from /i18n/config这类导入。assetsInclude: [**/*.webm]让.webm素材能被 Vite 当作静态资源处理配合下一节的?url导入。编写测试素材加载与示例视频、图片等静态素材统一放在tests/fixtures/目录当前仓库中有 tests/fixtures/sample.webm 和 tests/fixtures/sample-inflated-duration.webm。导入时加 Vite 的?url后缀让 Vite 通过 dev server 提供该文件import sampleVideoUrl from ../../../tests/fixtures/sample.webm?url;注意这条路径是相对于测试文件自身位置的上面的写法适用于放在src/lib/exporter/下的测试如 videoExporter.browser.test.ts如果你的测试文件放在其他目录../层数要相应调整。文档给出的完整浏览器测试示例对VideoExporter做真实导出import { describe, expect, it } from vitest; import sampleVideoUrl from ../../../tests/fixtures/sample.webm?url; import { VideoExporter } from ./videoExporter; describe(VideoExporter (real browser), () { it(exports a valid MP4 blob from a real video, async () { const exporter new VideoExporter({ videoUrl: sampleVideoUrl, width: 320, height: 180, frameRate: 15, bitrate: 1_000_000, wallpaper: #1a1a2e, zoomRegions: [], showShadow: false, shadowIntensity: 0, showBlur: false, cropRegion: { x: 0, y: 0, width: 1, height: 1 }, }); const result await exporter.export(); expect(result.success, result.error).toBe(true); expect(result.blob).toBeInstanceOf(Blob); }); });仓库中的实际测试还展示了更强的校验方式可以照着写MP4 导出后读取Blob的二进制内容把第 4–8 字节解码后断言为ftyp确认产物是合法 MP4 结构见 videoExporter.browser.test.tsGIF 导出后断言文件头匹配/^GIF8[79]a/见 gifExporter.browser.test.ts断言result.blob.size大于 1024以及onProgress回调收到过phase finalizing且percentage为 100 的进度事件。这些断言依赖真实解码管线在浏览器里跑通jsdom 下无法得到同样的结果——这正是浏览器测试存在的意义。运行与验证准备条件package.json的engines声明 Node 22.22.1 与 npm 10.9.4测试依赖vitest、vitest/browser、vitest/browser-playwright均为 ^4.1.4playwright/test^1.59.1已包含在项目 devDependencies 中正常npm install即可获得。第一步一次性安装浏览器。该命令会下载 Playwright 的chromium-headless-shell浏览器构建--with-deps参数意味着还会尝试安装其系统依赖在 Linux 上可能需要相应权限请在本机或具备权限的 CI 环境中执行npm run test:browser:install对应脚本为playwright install --with-deps chromium-headless-shell。第二步运行测试npm run test:browser对应脚本为vitest --config vitest.browser.config.ts --run。只有以.browser.test.ts(x)结尾的文件会被执行一次跑完即退出。验证方式就是测试自身的断言结果result.success为 true、result.blob是Blob实例、文件头ftyp/GIF8[79]a符合预期、进度事件走到 100。全部通过且无失败用例即表示被测代码在真实 Chromium 中按预期工作。CI 中的用法与本地一致先npm run test:browser:install再npm run test:browser。限制与注意点速度文档明确说明导出操作很慢建议 fixture 用小尺寸示例为 320×180和低码率来保持测试速度。不要为了更真实而引入大分辨率素材。超时单测 120 秒、单 hook 30 秒testTimeout/hookTimeout。如果你的用例超过这些值应优先缩减素材规模而不是盲目调大超时。划分边界纯逻辑、数据转换、无浏览器 API 的 hook 逻辑仍应留在单元测试里npm run test运行 jsdom 套件不要把两套测试的职责混在一起。无 GPU 环境配置里的 SwiftShader 参数已经处理了 headless CI 的 WebGL 问题本地开发与 CI 行为一致不需要额外配置。完成一次浏览器测试的写法后可以继续参考 docs/tests/writing-tests.md 中的单元测试部分文件放置、/别名、npm run test/npm run test:watch补齐其余逻辑的覆盖。【免费下载链接】openscreenCreate stunning demos for free. Open-source, no subscriptions, no watermarks, and free for commercial use. An alternative to Screen Studio.项目地址: https://gitcode.com/GitHub_Trending/open/openscreen创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考