点击时使用 Bootstrap Modal 测试 React答案

【问题标题】：Testing React with Boostrap Modal on click点击时使用 Bootstrap Modal 测试 React
【发布时间】：2016-01-30 18:20:58
【问题描述】：

我从 react bootstrap 网站获得了这个简单的代码...

import {Modal}  from 'react-bootstrap';
import React from 'react';

export default class ModalExperiment extends React.Component {


  constructor(props) {
    super(props);
    this.state = {
      open: false
    }
  }

  render(){
    let openModal = () => this.setState({open: true});
    let closeModal = () => this.setState({ open: false });

    return (
      <div>
        <button type='button' onClick={openModal} className='launch'>Launch modal</button>

        <Modal
          show={this.state.open}
          onHide={closeModal}
          aria-labelledby="ModalHeader" className='modalClass'
          >
          <Modal.Header closeButton>
            <Modal.Title id='ModalHeader'>A Title Goes here</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <p>Some Content here</p>
          </Modal.Body>
          <Modal.Footer>
            // If you don't have anything fancy to do you can use
            // the convenient `Dismiss` component, it will
            // trigger `onHide` when clicked
            <Modal.Dismiss className='dismiss btn btn-default'>Cancel</Modal.Dismiss>

            // Or you can create your own dismiss buttons
            <button className='btn btn-primary' onClick={closeModal}>
              Close
            </button>
          </Modal.Footer>
        </Modal>
      </div>
    )
  }
}

这是我的测试...简单我想点击启动按钮，验证模态打开，然后单击取消按钮以验证模态不再打开。

'use strict';

import React from 'react';
import ReactAddons from 'react/addons';
import {Modal}  from 'react-bootstrap';
import ModalExperiment  from '../ModalExperiment';

import ReactDOM from 'react-dom';

let TestUtils = React.addons.TestUtils;

fdescribe('ModalExperimentFunctional', function() {

  let page;


  fit("click the ok button should open the modal", () => {

    page = TestUtils.renderIntoDocument(<ModalExperiment/>);

    let launch = TestUtils.findRenderedDOMComponentWithClass(page, 'launch');

    let openButton = React.findDOMNode(launch);
    openButton.click(); // work till here

    //let modal = TestUtils.findRenderedComponentWithType(page, Modal);// this managed to find Modal type
    let modal = TestUtils.findRenderedDOMComponentWithClass(page, 'modalClass'); // this fails to find the modalClass..

  });
});

请问如何找到取消按钮？我尝试了各种方法，似乎没有什么对我有用。

【问题讨论】：

你试过使用 refs 吗？我认为问题可能是模态被附加到正文中，因此您无法通过在页面元素中查找类来找到它。在您关闭的button 上尝试ref="modalClose"，然后尝试使用page.refs.modalClose 访问它。最初的测试可能是一场噩梦。我记得一开始我对这种东西有很多问题。
谢谢垫。我将按钮关闭修改如下然后尝试使用 page.refs.modalClose 并返回 undefined .. react 0.13 是我正在使用的.我也是新来的反应..
是的，我试图弄清楚如何使用我的设置来做到这一点，但我也遇到了麻烦。我的测试有效，因为我将一个组件传递到模态，并且我在处于模态的上下文之外测试该组件。您可以测试您的 openModal 和 closeModal 函数是否实际更改了 state 但我不确定如何测试实际单击按钮会产生正确的结果
另外，我建议您将打开/关闭模式函数移到渲染之外。他们应该是要渲染的兄弟姐妹。 render 方法不应该改变状态，所以我会避免在那里定义这些函数。抱歉，我无法提供更多帮助！

标签： reactjs react-bootstrap reactjs-testutils

【解决方案1】：

测试使用中：

const component = ReactTestUtils.renderIntoDocument(<Modal />);
ReactTestUtils.Simulate.click(document.body.getElementsByClassName("close")[0]);

【讨论】：

【解决方案2】：

我终于用 jquery 选择器让它工作了..

import {Modal}  from 'react-bootstrap';
import React from 'react';

export default class ModalExperiment extends React.Component {


  constructor(props) {
    super(props);
    this.state = {
      open: false
    }
  }
  openModal() {
    this.setState({open: true});
  }

  closeModal() {
    this.setState({open: false });
  }

  render(){

    return (

      <div>
        <button type='button' onClick={this.openModal.bind(this)} className='openButton'>Launch modal</button>
        {this.state.open?
        <Modal
          show={this.state.open}
          onHide={this.closeModal.bind(this)}
          aria-labelledby="ModalHeader" className='modalClass'
          >
          <Modal.Header closeButton>
            <Modal.Title id='ModalHeader'>A Title Goes here</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <p>Some Content here</p>
          </Modal.Body>
          <Modal.Footer>
            <button className='closeButton btn btn-primary' onClick={this.closeModal.bind(this)}>
              Close
            </button>
          </Modal.Footer>
        </Modal> : ''}
      </div>
    )
  }
}

这是测试...

'use strict';

import React from 'react';
import ReactAddons from 'react/addons';
import {Modal}  from 'react-bootstrap';
import ModalExperiment  from '../ModalExperiment';
import $ from 'jquery';

let TestUtils = React.addons.TestUtils;

describe('ModalExperimentFunctional', function() {

  let page;

  beforeEach(() => {
    document.body.innerHTML = '';

    page = TestUtils.renderIntoDocument(<ModalExperiment/>);
  });



  fit("click the ok button should open the modal", () => {
    expect($('.closeButton').length).toBe(0);
    let openButton = React.findDOMNode(TestUtils.findRenderedDOMComponentWithClass(page, 'openButton'));

    TestUtils.Simulate.click(openButton);


    expect($('.closeButton').length).toBe(1);
    $('.closeButton').click();
    expect($('.closeButton').length).toBe(0);

  });
});

【讨论】：