開玩笑+酶反應測試無法獲得孩子

Question

我有以下組成部分：

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

我進行了此測試，其中我試圖驗證模式中的按鈕是否正確顯示（ this.renderButtons()中的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);
            });
        });

如果在測試中，我嘗試使用.debug()檢查BasicModal組件的內容， BasicModal得到以下信息：

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

我應該如何檢查按鈕是否已實際渲染？

Answer 1

嘗試使用.render()它會向渲染的React Component DOM返回cheerio。

https://github.com/airbnb/enzyme/blob/master/docs/api/ReactWrapper/render.md

在文檔中

 .render() => CheerioWrapper 

在當前節點的子樹的呈現的HTML周圍返回一個CheerioWrapper。

注意：只能在單個節點的包裝上調用。

返回

字符串：結果HTML字符串

例：

 const wrapper = mount(<Bar />); expect(wrapper.find(Foo).render().find('.in-foo')).to.have.length(1);