CODEWITHSUNDEEP
reactjsjestjs
Bomber
Bomber

Reputation: 10947

ReactJS testing component method using jest

Trying to text the onChange event of a react component, how do I mock the the event?

I keep getting the error Object has no method onSavecare, how can I access that method and test it?

Thanks

Component:

var React = require("react");
var InlineSelect = React.createClass({

getInitialState: function () {
    return {
        isEditing: false,
        newValue: '',
        value: this.props.value
    };
},

toggleEdit: function () {
    this.setState({isEditing: !this.state.isEditing});
},

getOptions: function () {
    return this.props.renderProps.data.map(function (item) {
        return <option key={item.value} value={item.value}>{item.label}</option>;
    }.bind(this));
},

onChange: function(event) {
    var newValue = event.nativeEvent.target.text;

    this.props.renderProps.onSaveCare(newValue);
    this.setState({value: newValue});
    this.toggleEdit();
},

render: function () {

    if (this.state.isEditing) {
        return (
            <form className="pure-form">
                <select value="" ref="selectMark" className="mark-selector" onChange={this.onChange}>
                    {this.getOptions()}
                </select>
            </form>
        );
    }

    return (
        <div className="mark-editor" onClick={this.toggleEdit}>
            <a href="#">{this.state.value}</a>
        </div>
    );

    }
});

module.exports = InlineSelect;

Here is my test:

jest.dontMock('../InlineSelect.js');

describe('Display options in select list', function() {

var React = require('react/addons'),  
InlineSelect = require('../InlineSelect.js'),
TestUtils = React.addons.TestUtils;

var renderProps = { 
  data: [
    { value: 1, label: 'Yes'},
    { value: 0, label: 'No'}
  ]
};

var component = TestUtils.renderIntoDocument(<InlineSelect renderProps=  {renderProps}  />);
var markEditor = TestUtils.findRenderedDOMComponentWithClass(component, 'mark-editor');
TestUtils.Simulate.click(markEditor);
var list = TestUtils.findRenderedDOMComponentWithTag(component, 'select');

it('has two options', function() {
  expect(list.props.children.length).toEqual(2);
});

it('adds it to the selected items', function() {
  TestUtils.Simulate.change 
    TestUtils.Simulate.change(list);
    expect(TestUtils.state.selectedItems.length).toEqual(1);
});`

Upvotes: 0

Views: 936

Answers (1)

PhilVarg
PhilVarg

Reputation: 4811

You're not passing a key onSaveCare to renderProps in the test

in the test you use:

var renderProps = { 
  data: [
    { value: 1, label: 'Yes'},
    { value: 0, label: 'No'}
  ]
};

but in the component you call onSaveCare on renderProps

this.props.renderProps.onSaveCare(newValue);

you need to add onSaveCare to renderProps

var renderProps = { 
  data: [
    { value: 1, label: 'Yes'},
    { value: 0, label: 'No'}
  ]
  onSaveCare: jest.genMockFunction()
};

Upvotes: 2

Related Questions