如何在测试中获取Shadcn Button组件的variant属性？

针对你的测试场景，常用的几种验证方式如下：

• 检查按钮是否处于禁用状态
  这是最贴合用户实际体验的测试逻辑。如果你的disabled variant会给按钮添加原生disabled属性，直接用测试库的断言方法即可：

  it('renders disabled button', () => {
    render(<Button variant="disabled" />);
    const button = screen.getByRole("button");
    expect(button).toBeDisabled();
  })
  

• 验证对应的样式类名
  Shadcn的Button基于Tailwind CSS构建，不同variant会绑定特定样式类。比如disabled variant通常会带有opacity-50、cursor-not-allowed这类类（具体类名取决于你项目中Button组件的自定义配置），可以通过检查类名来验证：

  it('renders disabled button', () => {
    render(<Button variant="disabled" />);
    const button = screen.getByRole("button");
    // 替换成你项目中disabled variant对应的实际类名
    expect(button).toHaveClass('opacity-50', 'cursor-not-allowed');
  })
  

• 检查组件暴露的自定义属性（不推荐）
  不建议直接测试组件内部的props传递（属于实现细节），但如果确实需要，可以让Button组件把variant作为自定义属性暴露出来（比如data-variant），再进行断言：

  it('renders disabled button', () => {
    render(<Button variant="disabled" data-variant="disabled" />);
    const button = screen.getByRole("button");
    expect(button).toHaveAttribute('data-variant', 'disabled');
  })
  

内容的提问来源于stack exchange，提问作者Jasperan