測試風格的成分與酶

Question

我有一個問題關於用酶測試，所以基本上我在做什麼的東西，看起來像：

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> 
    ); 
}; 

我想要做一些測試與酶在經過不同的道具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簡單起見。

關於如何實現這一點的任何想法？

Answer 1

我最終什麼事做的是：

1. 添加數據屬性按鈕
2. 安裝使用酶
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(); 
});