如何用 Vitest 浏览器模式与 testLayer 为 deck.gl 自定义图层编写测试【免费下载链接】deck.glWebGL2 powered visualization framework项目地址: https://gitcode.com/GitHub_Trending/de/deck.gl当你自己写了一个 deck.gl 图层类想验证它在初始化、属性更新和派生子图层时行为正确deck.gl/test-utils提供的testLayer就是官方文档指定的工具。本文的任务路径是把图层测试放进 Vitest 浏览器模式Playwright Chromium用testLayer跑一串顺序执行的 props 更新用例并在onError回调中把异常转成断言失败。适用前提是你的测试对象是一个继承 deck.glLayer的图层类开发依赖中已安装与deck.gl/core大/小版本一致的deck.gl/test-utils。准备条件与依赖安装deck.gl/test-utils是独立发布的开发依赖官方 overview 给出两种安装方式npm install --save-dev deck.gl/test-utils # or yarn add -D deck.gl/test-utils按 Vitest 路径的完整安装命令是npm install --save-dev deck.gl/test-utils vitest vitest/browser playwright版本对齐有一条明确要求deck.gl/test-utils的 major 和 minor 版本通常要与你在用的deck.gl/core一致例如9.0.x与9.0.y搭配使用。安装后检查package.json确认两者版本对齐。一个关键限制图层测试需要真实的 WebGL2 上下文JSDOM 不支持 WebGL不是deck.gl/test-utils的受支持环境测试必须运行在 Vitest Browser Mode 中。配置 Vitest 浏览器模式在vitest.config.ts中启用浏览器模式并使用 Playwright 提供 headless Chromium。官方 overview 给出的配置示例如下可直接复制import {defineConfig} from vitest/config; import {playwright} from vitest/browser-playwright; export default defineConfig({ test: { browser: { enabled: true, provider: playwright({ launchOptions: { args: [--use-angleswiftshader, --enable-unsafe-swiftshader] } }), instances: [{browser: chromium}], headless: true } } });注意配置中import {playwright} from vitest/browser-playwright这一行上面的安装命令没有显式包含vitest/browser-playwright这个包名如果你的项目安装后该模块解析失败需要单独补装它。launchOptions.args中的--use-angleswiftshader与--enable-unsafe-swiftshader是文档示例配置里的 Chromium 启动参数deck.gl 仓库自身的 vitest.config.ts 也在 headless 项目中使用同一组参数启动 chromium。编写图层测试从 Vitest 专用入口deck.gl/test-utils/vitest导入testLayer和generateLayerTests该入口内置了基于vi.spyOn()的图层方法 spy 集成import {test, expect} to from vitest;更正正确写法与文档保持一致import {test, expect} from vitest; import {testLayer, generateLayerTests} from deck.gl/test-utils/vitest;方式一手写 testCases逐步更新 propstestLayer的 API 文档说明testCases中的用例按顺序执行每个用例通过props一组完整的新 props或updateProps在前一个用例基础上合并的增量 props描述更新更新后调用onAfterUpdate回调供你断言。onAfterUpdate收到的info包含layer更新后的图层、oldState更新前的 state、subLayers复合图层派生的子图层、spiesspy 结果等字段。文档中的 Vitest 示例以GeoJsonLayer为例三个用例分别覆盖空数据初始化、替换数据后检查 state 与子图层数量、增量更新lineWidthScale后检查属性是否传递到子图层import {test, expect} from vitest; import {testLayer} from deck.gl/test-utils/vitest; import {GeoJsonLayer} from deck.gl/layers; test(GeoJsonLayer#tests, () { testLayer({ Layer: GeoJsonLayer, testCases: [ // Test case 1 { props: {data: []} }, // Test case 2 { props: { data: SAMPLE_GEOJSON }, onAfterUpdate({layer, oldState, subLayers}) { expect(layer.state.features).not.toBe(oldState.features); expect(subLayers.length).toBe(2); } }, // Test case 3 { updateProps: { // will be merged with the previous props lineWidthScale: 3 }, onAfterUpdate({subLayers}) { const pathLayer subLayers.find(l l.id.endsWith(linestrings)); expect(pathLayer.props.widthScale).toBe(3); } } ], onError: err expect(err).toBeFalsy() }); });对自定义图层结构完全相同只需三处替换Layer改为你自己的图层类testCases中的props/updateProps换成你的图层实际接受的 props第一个用例一般用空数据data: []做初始化onAfterUpdate里的断言改成针对你的图层状态例如检查layer.state字段、subLayers长度、通过getLayerUniforms读取的 uniform 值deck.gl 仓库自己的测试 scatterplot-layer.spec.ts 就是用getLayerUniforms验证radiusUnits被正确写入 uniform 的写法。import {test, expect} from vitest; import {testLayer} from deck.gl/test-utils/vitest; import {MyCustomLayer} from ./path/to/my-layer; // 替换为你的图层类导入路径 test(MyCustomLayer, () { testLayer({ Layer: MyCustomLayer, testCases: [ {props: {data: []}}, // 空数据初始化 { props: {data: SAMPLE_DATA}, // 替换为你的图层可消费的示例数据 onAfterUpdate({layer, subLayers}) { // 替换为你的断言检查 layer.state、subLayers 等 } }, { updateProps: {/* 替换为你的增量 props */}, onAfterUpdate({layer}) { // 替换为你的断言确认增量 props 已生效 } } ], onError: err expect(err).toBeFalsy() }); });上面代码块中的SAMPLE_DATA与断言内容必须替换为你自己的数据与预期其余骨架可直接使用。onError是每个操作后带错误回调参数为errorError|null和title操作名。文档示例统一写成onError: err expect(err).toBeFalsy()即任何一步操作产生错误都会让测试失败这是把运行期错误纳入验证的方式。两个使用限制要注意onAfterUpdate在 props 更新后立即调用如果图层含异步 props此时资源可能尚未加载完成。此类图层应改用testLayerAsync文档说明它的onAfterUpdate会被多次调用直到所有资源加载完毕且需要await testLayerAsync(...)。若需要 spy 图层类方法通过testLayer的spies参数或单个用例上的spies字段传入方法名/vitest入口会自动用vi.spyOn()建立 spy并在用例间恢复原实现。方式二用 generateLayerTests 生成一致性用例generateLayerTests 基于图层类的默认 props 自动生成一组测试用例用于检查图层类的一致性conformance与testLayer配合使用import {test, expect} from vitest; import {testLayer, generateLayerTests} from deck.gl/test-utils/vitest; import {GeoJsonLayer} from deck.gl/layers; test(GeoJsonLayer#conformance, () { const testCases generateLayerTests({ Layer: GeoJsonLayer, sampleProps: { data: SAMPLE_GEOJSON }, assert: (cond, msg) expect(cond, msg).toBeTruthy(), onAfterUpdate: ({layer, subLayers}) { expect(layer.state.features).toBeTruthy(); const expected layer.props.stroked ? 2 : 1; expect(subLayers.length).toBe(expected); } }); testLayer({Layer: GeoJsonLayer, testCases, onError: err expect(err).toBeFalsy()}); });参数说明来自文档sampleProps作为所有生成用例的基础 props可用来提供有意义的dataassert是条件检查回调接收condition与comment两个参数onAfterUpdate会被附加到每个生成的测试用例上。对自定义图层同样把Layer换成你的类、sampleProps换成你的示例数据即可。运行测试与判断结果用 Vitest 的标准方式运行例如npx vitest run即可测试会由 Playwright 启动 headless Chromium 执行。成功条件对应你写入的断言每个用例的onAfterUpdate中expect(...)全部通过onError回调收到的error始终为null否则expect(err).toBeFalsy()会失败终端输出所有测试用例为通过状态。deck.gl 仓库自身以同样的方式运行这些测试headless 项目配置见 vitest.config.tstest-headless脚本对应ocular-test headless大量现成的testLayer用例可以参考 test/modules 目录例如 scatterplot-layer.spec.ts 与 geojson-layer.spec.ts。边界说明testLayer 不验证像素输出文档明确区分了两类测试testLayer这类生命周期测试擅长捕获图层初始化与 props 更新中的问题但不保证图层正确渲染到屏幕例如 GPU shader 中的问题只能在集成测试中暴露。deck.gl 仓库的渲染/黄金图对比走的是另一套工具链SnapshotTestRunner probe.gl 的BrowserTestDriver见 snapshot-test-runner.md 与 testing.md 的 Integration Tests 一节。如果你后续需要验证自定义图层的渲染像素那条路径是独立任务不在本文范围内但需要知道生命周期测试通过并不代表渲染正确。相关文档Testing 总览deck.gl/test-utils overview含 Vitest 安装与配置testLayer APIgenerateLayerTests APISnapshotTestRunner渲染测试路径【免费下载链接】deck.glWebGL2 powered visualization framework项目地址: https://gitcode.com/GitHub_Trending/de/deck.gl创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考