JavaScript测试中Mock WebAuthn API需替换navigator.credentials对象，覆盖create()和get()方法以控制认证流程；模拟成功/失败响应、定制返回字段，并确保在浏览器环境（如jsdom）中运行。
在 JavaScript 测试中 Mock WebAuthn（指纹/生物识别）API，核心是**替换全局的 navigator.credentials 对象及其方法**，让测试能控制认证流程的输入与响应，避免真实硬件调用。下面分场景说明实用做法：
1. 基础 Mock：覆盖 create() 和 get()
WebAuthn 主要通过 navigator.credentials.create()（注册）和 navigator.credentials.get()（登录）触发。可在测试前手动注入 mock 实现：
// Jest 示例（其他测试框架逻辑类似）
beforeEach(() => {
const mockCreate = jest.fn().mockResolvedValue({
rawId: new Uint8Array([1, 2, 3]),
response: {
clientDataJSON: new Uint8Array([101, 102, 103]),
attestationObject: new Uint8Array([200, 201, 202])
}
});
const mockGet = jest.fn().mockResolvedValue({
rawId: new Uint8Array([4, 5, 6]),
response: {
clientDataJSON: new Uint8Array([110, 111, 112]),
authenticatorData: new Uint8Array([150, 151, 152]),
signature: new Uint8Array([210, 211, 212]),
userHandle: new Uint8Array([10, 11, 12])
}
});
// 替换全局 credentials
Object.defineProperty(navigator, 'credentials', {
value: { create: mockCreate, get: mockGet },
writable: true
});
});
2. 模拟失败场景：抛出标准错误
WebAuthn 失败时会抛出 DOMException（如 "NotAllowedError" 或 "NotSupportedError"）。Mock 时需还原这类行为，验证错误处理逻辑：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
mockCreate.mockRejectedValue(new DOMException('User cancelled', 'NotAllowedError'))mockGet.mockRejectedValue(new DOMException('Missing credential', 'NotFoundError'))- 注意：部分浏览器也用
TypeError（如不支持 WebAuthn），可按需模拟
3. 精确控制返回值：适配不同测试用例
真实 WebAuthn 返回对象结构较深，测试常需定制字段。例如：
立即学习“Java免费学习笔记（深入）”；
- 测试用户 ID 解析 → 在
response.userHandle中填入特定Uint8Array，再转成 Base64 验证解码逻辑 - 测试签名验证 → 设置
signature为已知合法/非法值，配合后端验签单元测试 - 测试多凭证选择 → 让
mockGet返回含多个allowCredentials匹配项的响应（实际由浏览器 UI 控制，但 mock 可跳过 UI）
4. 注意事项与兼容性
WebAuthn API 在 Node.js 环境不可用，所有 Mock 必须在浏览器环境（如 Jest 的 testEnvironment: "jsdom" 或真实浏览器测试）中进行。另外：
-
jsdom默认不实现CredentialsContainer，需手动补全（如上例） - 若用 Cypress，可用
cy.stub()替换navigator.credentials，并在cy.visit()前注入 - Vitest 用户推荐使用
vi.mock('node:process', async () => {...})配合全局注入，或直接修改global.navigator
