当使用Jest和Enzyme编写测试时,我遇到了以下错误 .

警告:失败的道具类型:道具在链接中标记为必需,但其值未定义 .

我正在为我的Modal组件生成测试,该组件具有带有链接组件的InnerModal . 我浅呈现ModalClass并测试我的handleOpen()函数,该函数触发prop-types警告 .

当我潜水()到由Enzyme渲染的Link组件时,我看到to行具有从Enzyme渲染中传递的正确道具 . 我离开了我的console.log函数来描述我在说什么 . 控制台读取以下内容 .

{ to: '/alertpage',
    children:
     { '$$typeof': Symbol(react.element),
       type:
        { [Function: Button]
          defaultProps: [Object],
          _meta: [Object],
          Content: [Object],
          Group: [Object],
          Or: [Object],
          handledProps: [Array],
          propTypes: [Object],
          create: [Function] },
       key: null,
       ref: null,
       props: { children: ' Yes ', as: 'button' },
       _owner: null,
       _store: {} },
    replace: false }

它绝对存在,所以如何摆脱这种警告呢?

代码如下 .

单元测试:

describe('ModalClass', () => {
    const wrapper = shallow( <ModalClass link={'/alertpage'}/> );
    
     it('modal is open after click button', () => {
        console.log(wrapper.find(InnerModal).at(0).dive().find(Link).props());
        console.log(wrapper.find(InnerModal).at(1).dive().find(Link).props())
        wrapper.instance().handleOpen();
        expect(wrapper.state().open).toBe(true);
    })
    
});

具有功能性InnerModal组件的ModalClass:

export class ModalClass extends Component {

    constructor(props) {
        super(props);
        this.state = {
            open: false
        };
    }

    handleOpen = () => this.setState({ open: true });

    handleClose = () => this.setState({ open: false });

    render() {
        return (
        <Modal open={this.state.open}
        trigger={
            <Button onClick={this.handleOpen}>
                <img src={this.props.image} alt="alert" width="100"></img>
            </Button>
            }>
            <Modal.Header> {this.props.modalHeader} </Modal.Header>
            <Modal.Content>
                <div class="ui two column centered grid">
                    <InnerModal 
                    buttonLabel={EMERGENCY_ALERT}
                    link={this.props.link}
                    color="red"
                    handleClose={this.handleClose}/>
                    <InnerModal 
                    buttonLabel={TEST_ALERT}
                    link={this.props.link}
                    color="green"
                    handleClose={this.handleClose}/>
                </div>
            </Modal.Content>
        </Modal>
    )
    }
}



export const InnerModal = (props) => {
    return (
        <Modal trigger={
            <Button color={props.color}> {props.buttonLabel} </Button>
        }>
        <Modal.Header> Are you sure you want to send out a {props.buttonLabel}? </Modal.Header>
        <Modal.Content>
            <div class="ui two column centered grid">
                <Link to={props.link}><Button> Yes </Button></Link>
                <Button onClick={props.handleClose}> No </Button>
            </div>
        </Modal.Content>
        </Modal>
    )
}

任何帮助,将不胜感激!