Question

使用Jest和Enzyme编写测试时遇到以下错误。

警告：道具类型失败：道具to在Link标记为必需，但其值为undefined。

我正在为我的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 }

它肯定存在，所以如何摆脱这种警告？

代码如下。

单元测试：

＆＃13;

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);
    })
    
});

＆＃13;

具有功能性InnerModal组件的ModalClass：

＆＃13;

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>
    )
}

＆＃13;

任何帮助将不胜感激！

使用酶的浅层渲染时，来自react-router Link的prop-type警告

0 个答案: