Unit Testing with Jest on React components

Question

I'am new to React and Jest and I am finding it very difficult to write a unit test for the following code.
My react code is working well but I am unable to figure out the testing part of it. I tried to look into few similar posts but was still unable to get it right.

Here is my React component (MySignUpForm.js):

var React = require('react');
var ReactDOM = require('react-dom');

var profileFor;
var Gender;
var MySignUpForm = React.createClass ({

 onRequiredGender: function (e) {
      Gender= e.currentTarget.value
  },

render : function() {         

    return (

           <div className="col-sm-6 col-xs-6 r_pad_0">
           <input className="myRadio" type="radio" name="gender" value="Male" onChange={this.onRequiredGender}/>
           <span className="l_pad_5">Male</span>
           </div>
           <div className="col-sm-6 col-xs-6 r_pad_0">
           <input className="myRadio" type="radio" name="gender" value="Female" onChange={this.onRequiredGender}/>
           <span className="l_pad_5">Female</span>
          </div>            
)

},

    });

module.exports = MySignUpForm; 

My jest file which is in tests folder (MySignUpFormTest.js):

jest.unmock('../MySignUpForm');

//import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-addons-test-utils';
import MySignUpForm from '../MySignUpForm';

describe('MySignUpForm', () => {
it("changes the checked state when clicked", () => {
var inputs = TestUtils.scryRenderedDOMComponentsWithClass(MySignUpForm, 'myRadio');
inputs.change = jest.genMockFunction();

  expect(inputs[0].getDOMNode().checked).toBe(false);
  TestUtils.Simulate.change(inputs[1], {target: {value: 'Female'}});
 expect(inputs[0].getDOMNode().checked).toBe(false);
 expect(inputs[1].getDOMNode().checked).toBe(true);

 expect(inputs.change).toBeCalled(); //Fails
 expect(inputs.change.mock.calls.length).toBe(1); //Fails too
});

});

I wish to test the radio button value change.

Thank you in advance.

Answer 1

Try to find input, if input doesn't exist return empty array, a module as argument but it need react element.

var inputs = TestUtils.scryRenderedDOMComponentsWithClass(MySignUpForm, 'myRadio');

how you invented it ?

inputs.change = jest.genMockFunction();

First - you ned render component into DOM or maybe use Shallow render, read more about it, jest have good documentation

const mySignUpFormComponent = TestUtils.renderIntoDocument(<MySignUpForm />);

when you can find react element's

var inputs = TestUtils.scryRenderedDOMComponentsWithClass(MySignUpForm, 'myRadio'); 

and only after all you can dispatch event to this element

this regard unit-test with jest

also read more about react, never do something like that

var Gender;
 onRequiredGender: function (e) {
      Gender= e.currentTarget.value
  },

In react you must have only state's and prop's

should like

var MySignUpForm = React.createClass ({
constructor: function () {
    super(props);
    this.state = {
        gender: false
    }
}
onRequiredGender: function (e) {
    this.setState({
        gender: e.target.value
    })
},

this if not solved example, read more about react and then try again.

small hint

<input onChange={ this.onRequiredGender.bind(this) }/>

search in google why you should do this