0

我有一个关于用酶测试的问题,所以基本上我正在做的事情看起来像:

const BaseButton = styled.button`
  padding: 10px;
`;

const PrimaryButton = BaseButton.extend`
  color: red;
`;

const SecondaryButton = BaseButton.extend`
  color: blue;
`;

// My actual component:
const buttonTypes = {
    primary: PrimaryButton,
    secondary: SecondaryButton
};
export const Button = (props: Props) => {
    const { type = 'primary' } = props;
    const Btn = buttonTypes[type] || buttonTypes.primary;

    return (
        <Btn
            {...props}
            onClick={props.onClick}
        >
            {props.children}
        </Btn>
    );
};

我想用 Enzyme 做一些测试,传递不同的道具type,例如测试应该说:

should render a Primary button if type='primary'

should render a Secondary button if type='secondary'

should render a Primary button if type=''

should render a Primary button by default

我的按钮有更多的属性,但我只是color为了简单起见。

关于如何实现这一目标的任何想法?

4

1 回答 1

-1

我最终做的是:

  1. 为按钮添加数据属性
  2. 使用 Enzyme 挂载组件
  3. 安装后,我曾经component.html()将组件作为字符串获取
  4. 检查是否应用了正确的属性
// Button.js
const buttons = {
    primary: 'primary',
    secondary: 'secondary'
};

export const ButtonStyles = styled.button.attrs({
    'data-button-type': props => buttons[props.type] || buttons.primary
})`
    padding: 10px;
`;

// Button.tests.js

it('should render a primary button when type prop is missing', () => {
    const wrapper = mount(
        <Button
            {...defaultProps}
            type=""
        />
    );

    expect(wrapper.html().includes('data-button-type="primary"')).toBeTruthy();
});
于 2017-05-31T23:45:36.327 回答