Testing pure UI components with multiple props variations

[avg0043]

Hi !
I have to test a library of pure presentational components. In general, the components receive props like: isDisabled, isRounded... which only shows/hide html elements or add some class names.

For this reason, I think that the best approach to test this is using snapshots.
Example component:

const Button = props => {
  const {
    children,
    isDisabled,
    isRounded,
    isSlim,
    icon,
    extraClass
  } = props

  const classes = cx(
    `clc-button`,
    {
      'clc-button--disabled': isDisabled,
      'clc-button--rounded': isRounded,
      'clc-button--slim': isSlim,
    },
    extraClass,
  )

  return (
    <button className={classes}>
      {icon && <Icon type={icon} />}
      {children && <span className="clc-button-text">{children}</span>}
    </button>
  )
}

But my main question is:
¿Should I create a snapshot test per each prop combination?

<Button isDisabled={true} /> (snapshot 1)
<Button isRounded={true} /> (snapshot 2)
...

¿Or should I create an only one general snapshot test sending the most props possible?

<Button isDisabled={true} isRounded={true} isSlim={true} icon="ball" /> (snapshot 1)

Thanks! :)

[avg0043]

As additional question, ¿should I add the styles to the snapshots too?
My components library is using scss styles, so if true, ¿which library should I use to integrate into the snapshotSerializers jest config?