单元测试应将富文本解析函数视为纯逻辑函数，输入HTML字符串，验证输出的结构、标签、属性及安全性；不依赖小程序环境或DOM，聚焦自定义过滤与解析逻辑，覆盖XSS防护、空输入、嵌套结构及base64图片等边界场景。
对富文本解析逻辑写单元测试，核心是把解析函数当作普通 JavaScript 函数来验证：输入一段 HTML 字符串，检查输出是否符合预期（结构、标签、属性、安全性等）。不依赖小程序环境或 DOM 渲染，纯逻辑驱动。
明确被测目标
通常不是测 wxParse 或第三方组件本身，而是你封装的解析流程，比如：
- 用 js-xss 过滤后的 HTML 是否去掉了 script/style 标签和危险属性
- 经过 正则替换（如 uniapp 中 richText.js 的样式增强）后，img 标签是否统一加了 width:100%
- 自定义白名单规则下，
<iframe>是否被移除、<img src="data:image/...">是否保留
用 Jest 模拟输入输出
以过滤 + 解析两步为例，假设你有这样一个工具函数：
function safeParse(html) {
const myxss = new xss.FilterXSS({
whiteList: { img: ['src'], p: [], strong: [] },
stripIgnoreTag: true,
stripIgnoreTagBody: ['script']
});
return wxParse(myxss.process(html)); // 假设 wxParse 是轻量解析器
}
对应单元测试可这样写：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
// safeParse.test.js
const { safeParse } = require('./richTextUtils');
test('过滤 script 标签并保留合法 img', () => {
const input = '<p>Hello</p><script>alert(1)</script><img src="a.jpg">';
const output = safeParse(input);
expect(output).not.toContain('<script>');
expect(output).toContain('<img src="a.jpg">');
expect(output).toContain('<p>Hello</p>');
});
覆盖典型风险场景
单元测试要主动“找茬”，重点验证安全与兼容性边界：
-
XSS 注入：传入
<img src=x onerror=alert(1)>，断言 onerror 属性被清除 -
空/非法输入：传入
null、undefined、空字符串，确认不报错且返回合理默认值（如空字符串） -
嵌套与边缘结构：如
<div><p><strong>test</strong></p></div>，验证层级是否被正确扁平化或保留 -
base64 图片：传入
<img src="data:image/png;base64,...>，检查是否保留在白名单内
避免测试环境陷阱
富文本解析测试容易误入 DOM 依赖陷阱。记住：
- 不要在 test 文件里 import
wxParse.js原始文件（它可能依赖小程序全局对象） - 把解析逻辑抽成独立函数，只接收字符串、返回字符串或 AST 对象
- 如果必须用 DOMParser（比如做结构校验），在 Node 环境中可用
jsdom模拟，但非必需——多数时候正则断言或字符串包含检查已足够
测试不是为了跑过覆盖率数字，而是守住内容安全和展示一致性的底线。每次后台富文本格式微调，这些用例就是第一道防线。
