反应/茉莉花/ Karma /幽灵单元测试：findDOMNode和renderIntoDocument不按预期工作

我正在尝试编写一个简单的单元测试，似乎无法弄清楚。我想测试引导模式，以确保它在我传递某些对象属性时显示正确的内容。下面是我的模态代码如下所示：反应/茉莉花/ Karma /幽灵单元测试：findDOMNode和renderIntoDocument不按预期工作

import React, { Component, PropTypes } from 'react'; 
import { Button, Modal } from 'react-bootstrap'; 

class ModalBox extends Component { 
    render() { 
    const { modalBox } = this.props; 
    let content; 

    if (modalBox.contentBody) { 
     content = modalBox.contentBody; 
    } else { 
     content = (
     <span> 
      <Modal.Header closeButton onHide={this.close.bind(this)}> 
      <Modal.Title>{modalBox.title}</Modal.Title> 
      </Modal.Header> 
      <Modal.Body> 
      {modalBox.message} 
      </Modal.Body> 
      {modalBox.isConfirm && 
      <Modal.Footer> 
       <Button onClick={modalBox.onCancel} className="modal-button cancel">{modalBox.cancelText || 'Cancel'}</Button> 
       <Button onClick={modalBox.onConfirm} className="modal-button confirm">{modalBox.confirmText || 'Confirm'}</Button> 
      </Modal.Footer> 
      } 
     </span> 
    ); 
    } 

    return (
     <Modal show={typeof modalBox != 'undefined'} onHide={this.close.bind(this)} dialogClassName={modalBox.dialogClassName || ''} backdrop={modalBox.backdrop || true}> 
     {content} 
     </Modal> 
    ); 
    } 
}

所以对于一个测试，我要确保，如果我传递一个包含它只是返回contentBody的模式身体contentBody领域的支柱modalBox。下面是我想要测试的例子：

it("renders only contentBody when provided",() => { 
let modalBoxObj = { 
    contentBody: <div className="test-content-body">This is a test.</div> 
}; 

let element = React.createElement(ModalBox, {modalBox: modalBoxObj}); 

let component = TestUtils.renderIntoDocument(element); 
let modalWrapper = TestUtils.scryRenderedDOMComponentsWithClass(component, 'modal'); 

// modalWrapper returns an empty array, so this returns "Expected 0 to be 1" 
expect(modalWrapper.length).toBe(1); 

let testBody = TestUtils.scryRenderedDOMComponentsWithClass(component, 'test-content-body'); 


// testBody returns an empty array, so this returns "Expected 0 to be 1" 
expect(testBody.length).toBe(1); 

// this returns "TypeError: 'undefined' is not an object (evaluating 'testBody[0].innerHTML')" 
expect(testBody[0].innerHTML).toEqual("This is a test."); 
}

我也试着做浅渲染与TestUtils.createRenderer并尝试这种做法，但没有运气吧。根据我在网上看到的例子和以前的测试经验，我反应< 0.14，我觉得这个测试应该可以工作。我只是不知道我错过了什么或误解。在过去，我做了类似下面的事情，只是看着componentNode对象来查找元素等，但componentNode返回null。

let component = TestUtils.renderIntoDocument(element); 
let componentNode = findDOMNode(component);

感谢您的帮助！

来源

2016-01-20 xveganxxxedgex

解决方案最终将向ModalBox组件添加ref。一旦添加，我们就能够像这样定位节点：

let component = TestUtils.renderIntoDocument(<ModalBox modalBox={modalBoxObj} />); 
let componentNode = findDOMNode(component.refs.modalBox._modal);

来源

2016-01-23 01:11:39 xveganxxxedgex

反应/茉莉花/ Karma /幽灵单元测试：findDOMNode和renderIntoDocument不按预期工作

回答

相关问题