入手することができません。子どもたちは、テスト

Question

を反応I次のコンポーネントがあります。

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()のもの）

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

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

ドキュメントで

.render() => CheerioWrapper 

...それはコンポーネントのDOMをレンダリング反応するようにチェリオを返す.render()を使用してみてくださいは、現在のレンダリングされたHTMLの周りCheerioWrapperを返します。 ノードのサブツリー。

注：単一ノードのラッパーでのみ呼び出すことができます。

戻り

文字列：結果のHTML文字列

例：

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