javascript - 测试 React Modal 组件

Question

抱歉，我一直在尝试通过单击按钮来测试关闭我的 React Modal，这让我度过了最艰难的时光。 Modal 尽可能简单，我已经尝试了所有我能想到或找到的方法，但我仍然无法查询它的子项。

模态组件:

var React = require('react');
var Modal = require('react-bootstrap').Modal;
var Button = require('react-bootstrap').Button;

var MyModal = React.createClass({
  ...
  render: function() {
    return (
      <Modal className="my-modal-class" show={this.props.show}>
        <Modal.Header>
          <Modal.Title>My Modal</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          Hello, World!
        </Modal.Body>
        <Modal.Footer>
          <Button onClick={this.props.onHide}>Close</Button>
        </Modal.Footer>
      </Modal>
    );
  }
});

我的目标是测试关闭按钮在被点击时是否触发 onHide() 函数。

我的测试文件:

describe('MyModal.jsx', function() {
  it('tests the Close Button', function() {
    var spy = sinon.spy();
    var MyModalComponent = TestUtils.renderIntoDocument(
      <MyModal show onHide={spy}/>
    );

    // This passes
    TestUtils.findRenderedComponentWithType(MyModalComponent, MyModal);

    // This fails
    var CloseButton = TestUtils.findRenderedDOMComponentWithTag(MyModalComponent, 'button');

    // Never gets here
    TestUtils.Simulate.click(CloseButton);
    expect(spy.calledOnce).to.be.true;
  });
});

无论我怎么尝试，我似乎都找不到关闭按钮。

Answer 1

我写了一个jsFiddle使用 React Base Fiddle (JSX)找出你的测试中发生了什么(我创建了我自己的“ spy ”，它在调用时简单地记录到控制台)。

我发现您找不到按钮的原因是因为它不存在于您可能期望的位置。

Bootstrap Modal Component ( <Modal/> ) 实际上包含在 React-Overlays 中模态组件(在代码中称为 BaseModal，来自 here )。这又会呈现一个名为 Portal 的组件。谁的render method简单地返回 null .是这个null您试图在其上查找渲染组件的值。

由于模态框没有以传统的 React 方式呈现，React 无法看到模态框以使用 TestUtils在。一个完全独立的 <div/>子节点放在document body 和这个新的 <div/>用于构建模式。

因此，为了允许您使用 React 的 TestUtils 模拟点击(按钮上的点击处理程序仍然绑定(bind)到按钮的点击事件)，您可以使用标准的 JS 方法来搜索 DOM。按如下方式设置您的测试:

describe('MyModal.jsx', function() {
  it('tests the Close Button', function() {
    var spy = sinon.spy();
    var MyModalComponent = TestUtils.renderIntoDocument(
      <MyModal show onHide={spy}/>
    );

    // This passes
    TestUtils.findRenderedComponentWithType(MyModalComponent, MyModal);

    // This will get the actual DOM node of the button
    var closeButton = document.body.getElementsByClassName("my-modal-class")[0].getElementsByClassName("btn btn-default")[0];

    // Will now get here
    TestUtils.Simulate.click(CloseButton);
    expect(spy.calledOnce).to.be.true;
  });
});

函数getElementsByClassName返回具有该类的元素集合，因此您必须从每个集合中取出第一个元素(在您的测试用例中，也是您唯一的一个)。

你的测试现在应该通过了^_^