本文详解在 Stencil 组件单元测试中，为何直接检查 button.disabled 属性可行但读取 disabled HTML 属性失败，并提供基于 SpecPage 和 E2EPage 的双重验证策略，兼顾准确性与测试场景适配性。
本文详解在 stencil 组件单元测试中，为何直接检查 `button.disabled` 属性可行但读取 `disabled` html 属性失败，并提供基于 specpage 和 e2epage 的双重验证策略，兼顾准确性与测试场景适配性。
在 Stencil 中测试 <button></button> 的禁用状态，关键在于区分 DOM 属性（property） 与 HTML 反射属性（attribute）。<button disabled></button> 的禁用行为由 disabled 布尔属性（property） 控制，而非 disabled attribute 本身——即使 HTML 中未显式写入 disabled attribute，只要 button.disabled = true，按钮即不可交互。你的测试代码 expect(button.disabled).toBe(true) 实际上是完全正确且推荐的做法，它直接验证了运行时真实生效的 DOM 状态。
然而，你观察到 button.getAttribute('disabled') 返回 null 或 undefined，这是预期行为：Stencil 默认不将 @Prop() 自动反射为 HTML attribute（即不会把 disabled={true} 渲染为 <button disabled></button>）。这并非 bug，而是设计选择——避免冗余属性污染 DOM（如 disabled="false" 违反 HTML 规范）。
✅ 正确的 SpecPage 单元测试方式（推荐）：
it('should render a disabled button when disabled prop is true', async () => {
const button = host.shadowRoot.querySelector('button') as HTMLButtonElement;
expect(button.disabled).toBe(true); // ✅ 验证实际禁用状态
expect(button.hasAttribute('disabled')).toBe(false); // ✅ 验证无冗余 attribute（符合预期）
});⚠️ 注意：不要为测试强行启用 reflect: true：
// ❌ 不推荐仅为了测试而添加
@Prop({ reflect: true }) disabled: boolean; // 会导致 disabled="false" 出现在 DOM，语义错误? 若需验证组件内部 Prop 值（如调试逻辑），应使用 E2E 测试：
// e2e.test.ts
it('should have disabled prop set to true', async () => {
const page = await newE2EPage({
components: [FilledButton],
html: '<app-filled-button disabled="true"></app-filled-button>'
});
const el = await page.find('app-filled-button');
expect(await el.getProperty('disabled')).toBe(true); // ✅ 访问组件实例属性
});? 总结：
-
单元测试（SpecPage）聚焦渲染结果：用
element.disabled断言功能行为，而非 attribute； -
E2E 测试（E2EPage）覆盖组件契约：用
getProperty()验证 Prop 绑定逻辑； -
避免
reflect: true滥用：仅当组件明确需通过 attribute 控制（如 SSR 兼容或 CSS attribute 选择器）时才启用。
遵循此分层策略，可确保测试既健壮又符合 Web 标准。
