Testing parts of components

componentTests.js

const LoginForm = ({email, password, onChange, onSubmit}) => (
  <div>
    <p>
      <label for="email">Email</label>
      <input
        id="email"
        onChange={val => onChange('email', val)}
        value={email}
      />
    </p>
    <p>
      <label for="password">Password</label>
      <input
        id="password"
        onChange={val => onChange('password', val)}
        value={password}
      />
    </p>
    <p>
      <button onClick={onSubmit}>Submit</button>
    </p>
  </div>
);

const submitHandler = ({email, password}, {submit}) => () => submit(email, password),

export default compose(
  withStateHandlers(
    {
      email: '',
      password: '',
    },
    {
      onChange: () => (name, value) => ({[name]: value}),
      onSubmit: submitHandler
    },
  ),
)(LoginForm);

export {LoginForm, submitHandler};

/* Tests */

import {submitHandler} from './LoginForm';

describe('submit handler', () => {
  it('submits the form correctly', () => {
    const onSubmitSpy = sinon.spy();
    submitHandler({email: 'bob@test.com', password: 'secret'}, {submit: onSubmitSpy})()
    expect(onSubmitSpy).toHaveBeenCalledWith('bob@test.com', 'secret');
  });
});