login.jsx

import React from 'react';

import AuthModel from './../../models/auth';

const Login = React.createClass({

	getInitialState() {
		return {
			username: this.fetchUsername(),
			errored: false
		};
	},

	componentWillMount() {
		this.authModel = AuthModel; // AuthModel is a singleton
	},

	handleSubmit(event) {
		event.preventDefault();
		this.login();
	},

	login() {
		let typedUsername = React.findDOMNode(this.refs.username).value;
		if(!typedUsername){
			return this.setState({
				errored: true
			});
		}
		// we don't actually send the request from here, but set the username on the AuthModel and call the
		// `login` method below
		this.authModel.set('username', typedUsername);
		this.authModel.login();
	}
	
});

login.test.js

import React from 'react/addons';
import sinon from 'sinon';
import Login from './../../../assets/js/react_components/auth/login.jsx';

const TestUtils = React.addons.TestUtils;

describe('login', () => {

	let LoginElement = TestUtils.renderIntoDocument(<Login />),
		form = React.findDOMNode(LoginElement.refs.loginForm),
		authModelStub = sinon.stub(LoginElement.authModel, 'login');

	afterEach(() => {
		LoginElement.state.errored = false;
	});

	it('doesn\'t call the login method if there\'s no username', () => {
		TestUtils.Simulate.submit(form);
		expect(LoginElement.state.errored).toEqual(true);
	});

	it('calls login when there\'s a username present', () => {
		React.findDOMNode(LoginElement.refs.username).value = 'foo';
		TestUtils.Simulate.submit(form);
		expect(authModelStub.calledOnce).toEqual(true);
	});

});