测试React Modal组件 [英] Testing a React Modal component

问题描述

我很抱歉，但是我一直在努力尝试通过点击按钮来关闭我的React Modal。 Modal尽可能简单，我已经尝试了所有我能想到或发现的东西，但我仍然无法查询它的孩子。

I'm sorry, but I've been having the toughest time trying to test closing my React Modal by clicking a button. The Modal is as simple as can be, and I've tried everything I can think of or find, but I still can't query its children.

模态组件：

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（）点击时的功能。

My goal is to test if that Close button fires the onHide() function when it is clicked.

我的测试文件：

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

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

No matter what I try, I can't seem to find the Close Button.

推荐答案

我写了一篇 jsFiddle 使用 React Base Fiddle（JSX）来了解测试中发生了什么（我创建了自己的'间谍'，只需在调用时登录到控制台。）

I wrote a jsFiddle using the React Base Fiddle (JSX) to find out what was going on in your test (I created my own 'spy' that simply logged to the console when called).

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

I found out that the reason you can't find your button is because it doesn't exist where you might expect it to.

Bootstrap模态组件（< Modal /> ）实际上包含在 React-Overlays 模式组件（代码中名为 BaseModal ，来自here ）。这反过来呈现一个名为 Portal 的组件，其渲染方法只返回 null 。您正在尝试查找渲染组件的 null 值。

The Bootstrap Modal Component (<Modal/>) is actually contained within a React-Overlays modal component (called BaseModal in the code, which is from here). This in turn renders a component called Portal whose render method simply returns null. It is this null value you are trying to find rendered components on.

由于模态没有被渲染传统的React方式，React无法看到模态以便使用 TestUtils 。一个完全独立的< div /> 子节点放在文档正文中，这个新的< div /> 用于构建模态。

Due to the modal not being rendered the traditional React way, React cannot see the modal in order to use TestUtils on. An entirely seperate <div/> child node is placed in the document body and this new <div/> is used to build the modal.

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

So, in order to allow you to simulate a click using React's TestUtils (the click handler on the button is still bound to the button's click event), you can use standard JS methods to search the DOM instead. Set up your test as follows:

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 返回元素集合有了这个课程，所以你必须从每个集合中选择第一个（在你的测试用例中，你唯一的一个）。

The function getElementsByClassName returns a collection of elements with that class so you must take the first one (and in your test case, your only one) from each collection.

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

Your test should now pass ^_^

这篇关于测试React Modal组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！