我有一个如下所示的组件。
当有一个警告图标道具时,应渲染组件。我已经写了一个测试用例来测试这种情况,尽管我通过了警报图标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)
})
})
这有什么问题,我该如何为这种情况编写测试用例?