无法测试redux-form

Question

I'm having difficulty testing react components that are decorated with redux-form. Here are some of the integration tests I'm trying to run. They are all failing, so it's clear that I haven't set up the tests properly. There appears to be a lot of discussion here and on GitHub on how challenging it can be to conduct unit and integration tests with redux-form. Any help would be appreciated.

confirmation.js

import React, { Component } from 'react';
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;

confirmation_test.js

import React from 'react';
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: 'test@gmail.com' } });
        form.simulate('submit');
        expect(sendActivationEmail.callCount).to.equal(1);
        done();
    });

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

Answer 1

Adding mergeProps as the third argument to the connect() function made my first two tests pass. For the third test, I added done() at the end of the test, which I initially neglected to add. Here is the code I added to my container component to make my tests pass:

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

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

Thanks to @tylercollier on this thread for helping me find this solution.