我有一个关于用酶测试的问题,所以基本上我正在做的事情看起来像:
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
为了简单起见。
关于如何实现这一目标的任何想法?