return enzyme.shallow( <Stateless {...requiredProps} {...props} onSubmit={spy} />

  <button
            className={classnames(style.button, style.login, {
                [style.disabled]: invalid || submitting
            })}
            type="submit"
            onClick={this.props.handleSubmit}> 

    const component = shallow();
    component.find('button').simulate('click'); 

import SignInFormComponent from 'js/components/SignInFormComponent';
import React from 'react';

import chai, { expect } from 'chai';
import sinonChai from 'sinon-chai';
import { shallow } from 'enzyme';
import chaiEnzyme from 'chai-enzyme';
import sinon from 'sinon';

chai.use(sinonChai);
chai.use(chaiEnzyme());

// Module systems magic dance.

    /* istanbul ignore else */
    if (typeof require === "function" && typeof exports === "object" && typeof module === "object") {
        // NodeJS
        module.exports = sinonChai;
    } else if (typeof define === "function" && define.amd) {
        // AMD
        define(function () {
            return sinonChai;
        });
    } else {
        // Other environment (usually <script> tag): plug in to global chai instance directly.
        chai.use(sinonChai);
    }

Error: Field must be inside a component decorated with reduxForm()

import TextField from "material-ui/TextField";
import Button from "material-ui/Button";
import Field from "redux-form";

export let renderTextField = ({
  input,
  label,
  meta: { touched, error },
  ...custom
}) => <TextField label={label} placeholder={label} {...input} {...custom} />;

export let SignUp = props => (
  <div>
    <form>
      <Field
        name="username"
        component={renderTextField}
        type="email"
        label="Email"
      />
      <Field
        name="password"
        component={renderTextField}
        type="password"
        label="Password"
      />
      <Button raised onClick={props.handleSubmit(props.signUp)}>
        Register
      </Button>
    </form>
  </div>
);

import SignUp from "../components/SignUpComponent";
import { connect } from "react-redux";
import { reduxForm } from "redux-form";
import { reducer } from "../lib/redux_saga";

let SignUpContainer = reduxForm({ form: "formular" })(SignUp);

const mapStatetoProps = null

const mapDispatchToProps = dispatch => {
	return {
		init: () => {
			dispatch(reducer.init());
		},
		signUp: values => {
			dispatch(reducer.signUp(values.username, values.password));
		}
	};
};

const mergeProps = (stateProps, dispatchProps, ownProps) =>
	Object.assign({}, stateProps, dispatchProps, ownProps);

export default connect(mapStatetoProps, mapDispatchToProps, mergeProps)(
	SignUpContainer
); 

import { mount, configure } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import SignUpContainer from "../containers/SignUpContainer";
import { Provider } from "react-redux";
import { reducer as formReducer } from "redux-form";
import { createStore, combineReducers } from "redux";
import sinon from 'sinon'

configure({ adapter: new Adapter() });

describe.only("SignUpContainer Mount", () => {
  let store, container, props, init, signUp; 
  beforeEach(() => {
    init = sinon.spy();
    signUp = sinon.spy();
    props = {
      init,
      signUp
    };
    store = createStore(combineReducers({ form: formReducer }));
    container = mount(<Provider store={store}><SignUpContainer {...props} /></Provider>);
  });

  it("render successfully if string is not provided by store", () => {
    const form = container.find("form");
    const input = form.find("input").first();
    input.instance().value = "newusername"
    expect(wrapper.find(TextField).props().value).to.equal('');
    expect(container).toBeDefined();
  });
});

import { reduxForm, Field } from 'redux-form';
import { connect } from 'react-redux';
import { sendActivationEmail, resetAuthError } from '../../actions';

export const renderField = ({ input, label, type, meta: { touched, error } }) => (
  <fieldset className="form-group">
    <div className={touched && error ? 'has-danger' : ''}>
      <p>Resend Confirmation Instructions</p>
      <input {...input} placeholder={label} type={type} className="form-control"/>
      {touched && error && <span className="error">{error}</span>}
    </div>
  </fieldset>
)

export class Confirmation extends Component {
  componentWillUnmount() {
    this.props.resetAuthError();
  }

  handleFormSubmit({ email }) {
    this.props.sendActivationEmail({ email });
  }

  renderAlert() {
    if (this.props.errorMessage) {
      return (
        <div className="alert alert-danger">
          <strong>Oops!</strong> {this.props.errorMessage}
        </div>
      )
    }
  }

  render() {
    const { handleSubmit } = this.props;
    return (
      <div>
        {this.renderAlert()}
        <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
          <Field
            label="Email"
            name="email"
            component={renderField}
            type="text"
          />
          <button type="submit" className="btn btn-primary">Resend</button>
        </form>
      </div>
    );
  }
}

function validate(formProps) {
  const errors = {};

  if (!formProps.email) {
    errors.email = 'Please enter an email';
  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(formProps.email)) {
    errors.email = 'Please enter a valid email address';
  }

  return errors;
}

function mapStateToProps(state) {
  return { errorMessage: state.auth.error }
}

Confirmation = reduxForm({
  form: 'confirmation',
  validate
})(Confirmation);

Confirmation = connect(mapStateToProps, { sendActivationEmail, resetAuthError })(Confirmation);

export default Confirmation;

import { expect } from 'chai';
import { shallow, mount, unmount } from 'enzyme';
import sinon from 'sinon';

import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import reduxThunk from 'redux-thunk';

import reducers from '../../../src/reducers';
import ConfirmationContainer, { ConfirmationComponent, renderField }  from '../../../src/components/auth/confirmation';

const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore);
const store = createStoreWithMiddleware(reducers);

  describe('Container', () => {
    let sendActivationEmail, resetAuthError, props, errorMessage, subject;
    beforeEach(() => {
      sendActivationEmail = sinon.spy();
      resetAuthError = sinon.spy();
      props = {
        sendActivationEmail,
        resetAuthError,
        errorMessage: 'required'
      };

      subject = mount(
        <Provider store={store}>
          <ConfirmationContainer {...props} />
        </Provider>
        )
      });

    it('renders error message', (done) => {
      expect(subject.find('.alert')).to.have.length(1);
      done();
    });

    it('calls sendActivationEmail on submit', (done)=> {
        const form = subject.find('form');
        const input = subject.find('input').first();

        input.simulate('change', { target: { value: '[email protected]' } });
    	form.simulate('submit');
    	expect(sendActivationEmail.callCount).to.equal(1);
        done();
    });

    it('calls resetAuthError on unmount', (done) => {
        subject.unmount();
        expect(resetAuthError.calledOnce).to.equal(true);
        done();
    });
  });