单击时使用 Bootstrap Modal 测试 React

Question

我从 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..

  });
});

请问如何找到“取消”按钮？我尝试了各种方法，似乎没有任何效果。

Answer 1

我终于用 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);

  });
});

Answer 2

测试使用中：

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

单击时使用 Bootstrap Modal 测试 React

Testing React with Boostrap Modal on click

reactjs

reactjs-testutils

react-bootstrap