当使用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>
)
}
任何帮助,将不胜感激!