JavaScript URL解析与拼接测试需用Jest/Vitest隔离DOM，验证parseURL准确拆解协议/主机/路径/查询/hash并处理编码与空值，addQueryParams须覆盖参数合并、编码安全、数组序列化及已有参数替换，URLSearchParams测试聚焦API调用正确性，mock window.location或a标签避免副作用。
JavaScript 中测试 URL 解析与拼接，核心是验证逻辑是否正确提取、组合、编码各部分，同时覆盖边界和异常情况。不依赖真实浏览器环境，用 Jest 或 Vitest 这类主流测试框架即可完成，关键在于隔离 DOM、控制输入、断言结构化输出。
测试 URL 解析逻辑（如 parseURL 函数）
重点验证能否从字符串中准确拆出协议、主机、路径、查询参数、hash 等字段，尤其注意编码处理和空值边界。
- 用
new URL()解析时，直接构造实例并断言其属性：例如new URL('https://a.com/path?k=v#h').pathname应等于'/path' - 若封装了自定义解析函数（如返回 { protocol, hostname, query } 的对象），需单独测试含中文、空格、特殊符号的 URL：例如
parseURL('https://x.com?q=你好&tag=a+b')中query.q应为'你好'，query.tag应为'a b'（自动解码） - 必须覆盖无效输入：传入空字符串、仅含 hash（
'#abc'）、相对路径（'/api?a=1'）时，应明确抛错或返回合理默认值（如空对象），并在测试中 assert 对应行为
测试 URL 拼接与参数追加（如 addQueryParams）
避免手拼字符串，重点测参数合并逻辑、重复键处理、编码安全性及数组参数序列化。
- 基础场景：向
'https://api.com/list'添加{ id: 123, name: 'test' }，结果应为'https://api.com/list?id=123&name=test'（注意等号和 & 是 URL 编码后的表现，实际字符串中是&） - 编码验证：传入
{ q: 'a&b', tag: 'x=y' }，确保生成的 query 部分是?q=a%26b&tag=x%3Dy，而非破坏结构的?q=a&b&tag=x=y - 数组支持：添加
{ ids: [1, 2, 3] }，可选策略包括ids=1&ids=2&ids=3（标准）或ids=1,2,3（需文档约定），测试需与实现一致 - 覆盖已有参数：原 URL 已含
?page=1，再追加{ page: 2, sort: 'date' }，结果应替换 page 值，最终为?page=2&sort=date
测试 URLSearchParams 的使用逻辑
现代项目多基于 URLSearchParams 封装工具函数，测试应聚焦其 API 调用是否正确，而非重测浏览器内置行为。
立即学习“Java免费学习笔记（深入）”；
- 构造时传入对象或字符串，检查
toString()输出是否符合预期，例如new URLSearchParams({ a: '1', b: '' }).toString()应为'a=1&b=' - 测试
append()、set()、delete()后的参数状态，例如params.set('x', 'y'); params.append('x', 'z');后调用getAll('x')应返回['y', 'z'] - 注意兼容性：若需支持旧版浏览器，测试中应 mock
URLSearchParams或跳过相关用例，避免 CI 失败
模拟环境与避免副作用
URL 操作本身无副作用，但若函数内部读取 window.location 或创建 a 标签，则需在测试前 mock。
- 对依赖
window.location.search的函数，测试前设置Object.defineProperty(window, 'location', { value: { search: '?a=1' } }); - 对使用
document.createElement('a')的老式解析方法，mock createElement 返回带 href 属性的对象，避免操作真实 DOM - 所有测试用例保持独立，不共享 URL 实例；每个 test 块内 new 一个新 URL 或 URLSearchParams，防止参数污染
