javascript - Chai.js - 如何测试 JSX 组件是否具有特定的样式属性？

Question

问题：

我使用 preact.js lib 创建了一个通用按钮组件。我还创建了一个让按钮居中或左对齐的道具：

• button.js

  import { h } from 'preact';
  import style from './style.less';
  import Button from '../button/index';
  
  const Button = (props) => (
      <div style={{textAlign: `${props.isCentered ? "center" : "left"}`}}>
      <a style={{backgroundColor: `${props.bgColor}`, color: `${props.color}`}} class={style.a}>{props.text}</a>
      </div>
  );
  
  export default Button;
  

在我的睾丸套装中，我正在考虑一种方法来检查按钮组件是否居中。但我不想比较整个组件本身，因为测试可能会因为属性align: center或其他原因而中断align: left：

• button.test.js

  import { h } from 'preact';
  import { expect } from 'chai';
  
  import Button from '../../../src/components/button';
  
  describe('components/Header', () => {
  
      const buttonCentered = <Button isCentered={true} text="Precisa de alguma ajuda?" bgColor="#673ab7" color="white" />;
      const buttonNotCentered = <Button isCentered={false} text="Precisa de alguma ajuda?" bgColor="#673ab7" color="white" />;
  
      const buttonWithNoText = <Button isCentered={false} text=" " bgColor="#673ab7" color="white" />;
  
      it('should show button centered', () => {
          expect(buttonCentered).to.equal(
              <div style="text-align: center;">
                  <a class="a" style="background-color: #673ab7; color: white;">Precisa de alguma ajuda?</a>
              </div>
          );
      });
  
      it('should show button not centered', () => {
          expect(buttonNotCentered).to.equal(
              <div style="text-align: left;">
                  <a class="a" style="background-color: #673ab7; color: white;">Precisa de alguma ajuda?</a>
              </div>
          );
      });
  });
  

所以我的问题是：如何检查组件是否具有特定样式align: center或align: left使用 chai.js 断言 api？