JavaScript 中单元测试怎么测试国际化文案输出-js教程-PHP中文网

验证国际化需检查data-i18n等属性值是否精确匹配语言包对应key，lang属性须同步且符合bcp 47，覆盖缺失键、加载失败等异常场景，并确保插值安全防xss。

javascript 中单元测试怎么测试国际化文案输出

验证文案是否按语言正确替换

核心不是检查“有没有文字”，而是确认每个 data-i18n 元素的文本内容，是否精确等于当前语言包中对应 key 的值。比如页面有 <h2 data-i18n="welcome"></h2>，切换到日语后，其 textContent 必须严格等于 ja.json 中 "welcome": "ようこそ" 的值，不能是空、undefined 或英文残留。

测试脚本需遍历所有带国际化属性的节点：
• data-i18n（主文本）
• data-i18n-placeholder（输入框提示）
• data-i18n-title（tooltip）
• data-i18n-alt（图片替代文本）
漏掉任一类型，都可能在真实场景中暴露未翻译内容。

确保 lang 属性与 DOM 状态同步

document.documentElement.lang 必须准确反映当前激活语言，且所有显式声明 lang 的子元素（如 <p lang="ar"></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill2773" title="Java Development Manual"><img src="https://img.php.cn/upload/skill/000/000/081/178936208989088.jpg" alt="Java Development Manual" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill2773" title="Java Development Manual" class="overflowclass">Java Development Manual</a> <p class="overflowclass">Java开发手册规约集合，基于阿里巴巴Java开发手册（嵩山版）。涵盖7大维度：编程规约、异常日志、单元测试、安全规约、MySQL数据库、工程结构、设计规约。当用户需要：(1) 编写或审查Java代码 (2) 检查命名/代码规范 (3) 处理异常和日志 (4) 编写单元测试 (5) 安全编码 (6) 数据库设...</p> </div> <a rel="nofollow" href="/xiazai/skill2773" title="Java Development Manual" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>）不能被全局语言切换覆盖或忽略。仅设置根节点 lang，对局部多语言内容无效——测试必须分别校验根节点和关键子节点的 lang 值是否匹配预期语言码（如 "zh"、"ar"），并符合 BCP 47 规范。

特别注意：
• 若语言包某 key 值为空字符串（"button_submit": ""），测试应报“缺失翻译”，而非视为通过
• <script></script>、<style></style>、<pre class="brush:php;toolbar:false;"></pre> 内部的 data-i18n 不参与渲染，测试时应跳过或主动报错提醒

覆盖 fallback 和异常场景

国际化健壮性体现在降级能力。测试需主动模拟两类失败：
• 语言包缺失键：临时移除某个 key（如删掉 en.json 中的 "error_network"），验证页面是否回退到 fallback 语言对应文案，或显示兜底占位符（如 [error_network]）
• fetch 失败或加载超时：拦截语言资源请求并返回 404 或延迟响应，确认 UI 不崩溃，且能维持上一语言状态或展示友好提示

避免只测“一切正常”的 happy path；真正出问题的，往往就是这些边界情况。

检查动态内容与安全风险

带插值的文案（如 t("hello_name", { name: "Alice" })）必须验证：
• 占位符被正确替换，无遗漏或错位
• 用户输入内容（如 name = "<script>alert(1)</script>"）是否被自动转义，防止 XSS
• HTML 插值（dangerouslySetInnerHTML 类场景）是否明确标记并受控，不因语言切换意外注入原始 HTML

建议扫描所有使用插值的 key，在测试中传入含特殊字符、标签、Unicode 符号的参数，观察渲染结果是否符合预期且安全。