Reputation: 4156
I have the following component:
GenericButton:
render() {
return(
<span>
<Button ... props... />
{this.renderModalIfNeeded()}
</span>);
}
renderModalIfNeeded() {
if (this.props.modalConfirm) {
return <BasicModal ref={(component) => this.modal = component}
title="Confirm"
body={this.props.modalText}
buttons={[
{
id: "Cancel_"+this.props.id,
text : 'Cancel',
style : 'grey'
},
{
id: "Confirm"+this.props.id,
text : 'OK',
action : () => this.props.action()
}
]}/>;
}
}
BasicModal:
renderButtons() {
return this.props.buttons
.map((button) => {
const previousAction = button.action;
button.action = () => {
if (previousAction) {
previousAction();
}
this.close();
};
return button;
})
.map((button, count) => <GenericButton key={"Button_"+count+"_"+this.props.id} {...button} />);
}
render() {
return (
<Modal show={this.state.showModal} onHide={::this.close}>
<Modal.Header closeButton>
<Modal.Title>{this.props.title}</Modal.Title>
</Modal.Header>
<Modal.Body>
{this.props.body}
</Modal.Body>
<Modal.Footer>
{this.renderButtons()}
</Modal.Footer>
</Modal>
);
}
I have this test, in which i am trying to validate that the buttons in the modal are shown properly (the ones in this.renderButtons()
)
describe('Given modal requirements', () => {
const text = "Ne me mori facias";
const id = "Generosa";
const innerModal = mount(<GenericButton id={id} modalConfirm={true} modalText={text}/>).find('BasicModal').first();
it('has two buttons', () => {
const cancelButton = <GenericButton id={"Cancel_"+id} text="Cancel" style="grey"/>;
const okButton = <GenericButton id={"Confirm_"+id} text="OK" action={() => {}} />;
const extractModalBody = (modal) => {
return modal.find('BasicModal').first().find('Modal');
};
expect(extractModalBody(innerModal)).toContainReact(cancelButton);
expect(extractModalBody(innerModal)).toContainReact(okButton);
});
});
If within the test i try to check the contents of the BasicModal
component using .debug()
I get the following:
<BasicModal title="Confirm" body="Ne me mori facias" buttons={{...}}>
<Modal show={false} onHide={[Function]}>
<Modal show={false} onHide={[Function]} backdrop={true} keyboard={true} autoFocus={true} enforceFocus={true} manager={{...}} renderBackdrop={[Function]} animation={true} dialogComponentClass={[Function]} bsClass="modal">
<Modal onHide={[Function]} keyboard={true} autoFocus={true} enforceFocus={true} manager={{...}} renderBackdrop={[Function]} show={false} onEntering={[Function]} onExited={[Function]} backdrop={true} backdropClassName="modal-backdrop" containerClassName="modal-open" transition={[Function]} dialogTransitionTimeout={300} backdropTransitionTimeout={150} />
</Modal>
</Modal>
</BasicModal>
How am i supposed to check that the buttons are actually rendered?
Upvotes: 1
Views: 772
Reputation: 4570
Try using .render()
it returns a cheerio to a React Component DOM rendered ..
https://github.com/airbnb/enzyme/blob/master/docs/api/ReactWrapper/render.md
In the docs
.render() => CheerioWrapper
Returns a CheerioWrapper around the rendered HTML of the current node's subtree.
Note: can only be called on a wrapper of a single node.
Returns
String: The resulting HTML string
Example:
const wrapper = mount(<Bar />); expect(wrapper.find(Foo).render().find('.in-foo')).to.have.length(1);
Upvotes: 2