Question

我有一个这样的功能组件：

import React from 'react'
import Button from '@material-ui/core/Button';
import { withStyles } from '@material-ui/core/styles';
import Icon from '@material-ui/core/Icon';

const styles = theme => ({
  button: {
    margin: theme.spacing.unit,
  },
  leftIcon: {
    marginRight: theme.spacing.unit,
  },
  rightIcon: {
    marginLeft: theme.spacing.unit,
  },
  iconSmall: {
    fontSize: 20,
  },
});

const IconLabelButtons = props => {
    const {button,rightIcon} = props.classes
    const {title,icon,click,type, variant, color} = props
    return (
        <Button variant={variant} color={color} className={button} onClick={click} type={type}>
            {title}
            {icon && <Icon className={rightIcon}>{icon}</Icon>}
        </Button>
        )
}

export default withStyles(styles)(IconLabelButtons);

现在，当我尝试使用酶的浅层方法对其进行测试时：

    import {shallow} from 'enzyme';
    const wrapped = shallow(<IconLabelButtons />);
    expect(wrapped.find('button').length).toEqual(1);

它表示预期为1，但收到0。

但是当我这样做时：

cosnole.log(wrapped.html())退出

<button class="MuiButtonBase-root-31 MuiButton-root-5 MuiButton-text-7 MuiButton-flat-10 IconLabelButtons-button-1" tabindex="0" type="button"><span class="MuiButton-label-6">foo</span></button>

那不是很浅吗？当我使用mount时，它可以工作，但我认为应仅使用shallow测试一个没有子组件的组件。

我在做什么错？

Answer 1

您正在找到一个HTML <button>，它是Button组件的子代，因此不会在浅层包装中找到。如果改为致电wrapped.find(Button)（大写B），它将起作用。

.find（'button'）不适用于浅层

1 个答案: