javascript单元测试富文本图片过滤，核心是验证函数能否准确识别并移除非法标签（如data:协议、无src、非法域名、xss载荷），保留合法内容与非img结构，使用domparser或字符串断言确保输入输出行为符合预设安全规则。
JavaScript 单元测试中测试富文本图片过滤，核心是验证过滤逻辑是否能正确识别、移除或转换不合规的 <img> 标签，同时保留合法内容。重点不是渲染效果，而是 HTML 字符串或 DOM 结构的输入输出行为是否符合预期。
明确过滤规则再写测试
图片过滤通常有具体策略，比如：
- 只允许特定域名（如
https://cdn.example.com/）的图片 - 禁止
data:协议（防止 base64 图片注入） - 移除无
src或src为空/非法的<img> - 可选：自动补全协议、转为安全属性（如加
loading="lazy"）
测试前先用注释或常量固化这些规则，避免测试和实现脱节。例如：
const ALLOWED_IMG_HOSTS = ['cdn.example.com', 'images.example.org'];
用真实 HTML 字符串做输入，断言输出结构
富文本过滤函数通常接收字符串（如用户粘贴的 HTML），返回净化后的字符串。测试时直接构造含各种 img 的 HTML 片段：
- ✅ 合法图片：
<img src="https://cdn.example.com/a.jpg?x-oss-process=image/resize,p_40"> - ❌ 非法域名：
<img src="https://evil.com/x.png?x-oss-process=image/resize,p_40">→ 应被移除 - ❌ data URL：
<img src="data:image/png;base64,...">→ 应被移除 - ❌ 无 src：
<img alt="test">→ 应被移除 - ✅ 带其他属性：
<img src="..." alt="ok" class="thumb">→ 应保留
使用 expect(result).not.toContain('<img> 或更精确地用 <code>DOMParser 解析后检查节点数量，确保逻辑覆盖边界情况。
隔离 DOM 操作，避免依赖浏览器环境
单元测试运行在 Node.js（如 Jest）中，没有真实 DOM。不要在测试里调用 document.createElement 或 innerHTML。推荐方式：
- 用
new DOMParser().parseFromString(html, 'text/html')模拟解析（Jest 支持） - 或直接对字符串做正则/AST 处理（如用
parse5或jsdom轻量集成） - 若过滤函数本身依赖
document，需在测试前用jsdom注入全局document，但要明确 mock 行为
例如 Jest 中启用 jsdom：
/** @jest-environment jsdom */
覆盖 XSS 风险场景，不只是“有没有 img”
富文本过滤本质是安全防护，测试必须包含典型攻击载荷：
-
<img src="x" onerror="alert(1)">→ 应移除整个标签，不能只删属性 -
<img src="javascript:alert(1)">→ 协议校验需拦截 -
<img src="JaVaScRiPt:alert('XSS')">→ 测试大小写不敏感处理 - 嵌套恶意：
<div><img src="bad"></div>→ 确保不影响外层结构
每个用例都应断言：输出中既不含危险属性，也不含非法 src，且原始非 img 内容（如文字、<p></p>）完好保留。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
