酶mount.find不适用于样式化的组件

时间:2019-04-09 08:55:22

标签: jestjs enzyme

我有一个如下所示的组件。

当有一个警告图标道具时,应渲染组件。我已经写了一个测试用例来测试这种情况,尽管我通过了警报图标prop,但是由于没有组件,所以它失败了。

我的组件

    const DefaultAlert = ({
  icon: alertIcon,
  description,
  title,
  dark,
  required = false,
  ...props
}) => {
  const AlertIcon =
    alertIcon &&
    styled(alertIcon).attrs({
      size: ({ theme: { metrics } }) => metrics.font.normal,
      className: 'alertIcon'
    })`
      transition: all ease 0.25s;
      position: relative;
      fill: none;
      top: -1px;
      cursor: pointer;
      ${({ dark, theme: { colors } }) =>
    dark ? `stroke: ${colors.primaryText}` : ''};
    `
  return (
    <AlertCard required={required}>
      <TitleHolder>
        <IconHolder>
          {alertIcon && <AlertIcon name='AlertIcon' required={required} />}
        </IconHolder>
        <AlertTitle uppercase conden bold small required={required}>
          {title}
        </AlertTitle>
      </TitleHolder>
      <P conden tiny compact>
        {description}
      </P>
    </AlertCard>
  )
}

测试代码

export function mountWithTheme (component) {
  mountWithTheme
  return mount(<ThemeProvider theme={theme}>{component}</ThemeProvider>)
}

describe('tests for <DefaultAlert />', () => {
  it('should have <AlertIcon/> when there is alertIcon prop', () => {
    let component = mountWithTheme(
      <DefaultAlert theme={theme} alertIcon={FeatherPlus} />
    )
    const value = component.find('[name="AlertIcon"]')
    expect(value.length).toBe(1)
  })
})

这有什么问题,我该如何为这种情况编写测试用例?

0 个答案:

没有答案