React.js - component of the testing form

Question

In my training application, I have an AddForm component:

var React = require('react'); var Input = require('react-bootstrap').Input; var TeamActions = require('../actions/team_actions.js'); var AddForm = React.createClass({ handleFormSubmit: function(e) { e.preventDefault(); var name = this._trimmedValue(this.refs.name); var rating = this._trimmedValue(this.refs.rating); if (name && rating) { TeamActions.addTeam( {name: name, rating: rating} ); this._clearField(this.refs.name); this._clearField(this.refs.rating); } }, _trimmedValue: function(field) { return field.getInputDOMNode().value.trim(); }, _clearField: function(field) { field.getInputDOMNode().value = ''; }, render: function() { return ( <form onSubmit={this.handleFormSubmit}> <Input label="Name" type="text" placeholder="Name" ref="name" /> <Input label="Rating" type="text" placeholder="Rating" ref="rating" /> <Input bsStyle="primary" type="submit" value="Add!" /> </form> ); } }) module.exports = AddForm; 

TeamActions:

 var McFly = require('mcfly'); var Flux = new McFly(); var TeamConstants = require('../constants/team_constants.js'); var TeamActions = Flux.createActions({ addTeam: function(team) { return { actionType: TeamConstants.ADD_TEAM, team: team } } }); module.exports = TeamActions; 

As you can see, I use McFly and React-Bootstrap here.

Now I want to test it using jokes.

I would like to have the following test cases:

1) if someone tries to submit a form with empty entries, nothing should happen (more precisely, there should be no interaction with TeamActions)

2) if you submit a form with a valid name and rating, then there must be a correct call to TeamActions mock

3) if you submit a form with a valid name and rating, then you should clear the names and ratings.

How to check it? Should I access the DOM in any way using TestUtils test cases?

Do I have to somehow model the form feed? If so, how to do it?

One last thing: my AddForm depends on TeamActions. By writing:

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

is jest instructed to make fun of all these dependencies (reaction, reaction-bootstrap, team_actions) or am I somehow mocking TeamActions?

// edit:

Because someone said that I asked too many questions in one topic to be more specific:

How can I simulate a form presentation with a specific payload using TestUtils? Do I need to mock TeamActions myself or am I automatically mocking me?

Answer 1

React TestUtils allows you to simulate form submission:

 var addForm = TestUtils.renderIntoDocument(AddForm(null)); var form = TestUtils.findRenderedDOMComponentWithTag(addForm, 'form'); TestUtils.Simulate.submit(form); 

How can I check actions by manually shouting addTeam . Before simulating something in a test, do something like:

 var TeamActions = require('../actions/team_actions'); TeamActions.addTeam = jest.genMockFn(); /* then simulate submission... */ expect(TeamActions.addTeam).toBeCalledWith({name: 'name', rating: 'rating'}); 

To test the input values ​​just use the links.

 addForm.refs.name.getDOMNode().value = 'Some Name'; /* perform some action that should clear input */ expect(addForm.refs.name.getDOMNode().value).toEqual(''); 

change

To answer your edited question, it seems you don’t need to manually addTeam ; I just tried it and it seems Jest figured out how to mock McFly's actions.