问题：

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？

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

问题：

0 个答案: