React/ Жасмин / Карма / Призрачный юнит-тест: findDOMNode и renderIntoDocument не работают должным образом

Question

Я пытаюсь написать простой модульный тест и не могу понять это. Я хочу протестировать модал начальной загрузки, чтобы убедиться, что он отображает правильное содержимое, когда я передаю ему определенные свойства объекта. Вот как выглядит мой модальный код:

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

Итак, для теста я хочу убедиться, что если я передам prop modalBox, содержащий поле contentBody, он просто возвращает contentBody для модального тела. Вот пример того, что я пытаюсь проверить:

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 возвращает ноль.

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

Спасибо за вашу помощь!

Answer 1

Решением стало добавление ссылки на компонент ModalBox. После добавления мы смогли настроить таргетинг на узел следующим образом:

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