Modal Button testing in ReactJS using Jest

Question

Hello I am trying to write automation testing for my ReactJS project. my LoginModal.js is here

    var React =require('react');
    var ReactBootstrap= require('react-bootstrap/lib');
    var Modal= ReactBootstrap.Modal;

    var LoginModal= React.createClass({
      getInitialState: function() {
           return  {(
            showModal: false
          )}
      },
     open() {
        this.setState({ showModal: true });
      },
     render: function(){
       return(
            <div>
               <Modal show={this.state.showModal} onHide={this.close} 
                      bsSize="small" 
                      aria-labelledby="contained-modal-title-sm" 
                      enforceFocus >
                     {this.state.showModal ? 
                       this.props.labelOn :this.props.labelOff
                     }
                    <h1>Hello World</h1>
              </Modal>
              <button type="button" 
                      className="member_login btn btn-link"
                      onClick={this.open}  id="login">
                      Login <span className="caret"></span>
              </button>
           </div>
            )
        }

    });

and my test file is following:

jest.unmock('../src/js/components/LoginModal');
var React =require('react');
var ReactDOM = require('react-dom');
var TestUtils= require('react-addons-test-utils');
var LoginModal= require('../src/js/components/LoginModal');
describe('LoginModal', () => {
it('open the modal after click', () => {
    const loginClick = TestUtils.renderIntoDocument(
      <LoginModal labelOn=true labelOff=false />
    );
const loginClickNode = ReactDOM.findDOMNode(loginClick);
expect(loginClickNode.textContent).toEqual(false);
TestUtils.Simulate.change(
      TestUtils.findRenderedDOMComponentWithTag(loginClick, 'Modal')
    );
    expect(loginClickNode.textContent).toEqual(true);
  });
});

I want to write unit testing for Login button but I didn't get any sample or example online. If anyone will help me then it will be great. after using npm testerror is showing at LoginModal module.

I am new to reactJs and I am not getting any tutorial on jest or another testing sample through google. Thanks

Modal Button testing in ReactJS using Jest

0 Answers0