Testing the Select component with a Redux Form

container.jsx

// bunch of imports...

/**
 * Add these into the top of any container, and then add `<MyForm />`
 * anywhere into the component to rendner the form.
 */

import Button from 'progressive-web-sdk/dist/components/button'
import Field from 'progressive-web-sdk/dist/components/field'
import FieldRow from 'progressive-web-sdk/dist/components/field-row'
import isEmail from 'validator/lib/isEmail'
import {reduxForm} from 'redux-form'
import * as ReduxForm from 'redux-form'

const validate = (formValues) => {
    const errors = {}
    console.log(formValues)
    if (formValues.email && !isEmail(formValues.email)) {
        return {
            _error: 'Enter a valid email address'
        }
    }
    return errors
}

const Form = ({handleSubmit, invalid, submitting, onSubmit, error}) => (
    <form>
        <FieldRow>
            <ReduxForm.Field
                component={Field}
                name="test"
                label="test"
            >
                <select>
                    <option value="test">Test</option>
                </select>
            </ReduxForm.Field>
        </FieldRow>

        <FieldRow>
            <ReduxForm.Field
                component={Field}
                name="foo"
                label="Foo"
            >
                <input type="date" />
            </ReduxForm.Field>
        </FieldRow>

        <FieldRow>
            <ReduxForm.Field
                component={Field}
                name="bar"
                label="Bar"
            >
                <input type="checkbox" />
            </ReduxForm.Field>
        </FieldRow>

        <FieldRow>
            <ReduxForm.Field
                component={Field}
                name="foobar"
                label="Foobar"
            >
                <input type="radio" />
            </ReduxForm.Field>
        </FieldRow>

        <FieldRow>
            <ReduxForm.Field
                component={Field}
                name="price10"
                label="$10.00"
                className="pw--pillow"
            >
                <input type="radio" />
            </ReduxForm.Field>

            <ReduxForm.Field
                component={Field}
                name="price20"
                label="$20.00"
                className="pw--pillow pw--active"
            >
                <input type="radio" />
            </ReduxForm.Field>
        </FieldRow>

        <FieldRow>
            <ReduxForm.Field
                component={Field}
                name="email"
                label="Email"
            >
                <input
                    type="email"
                    placeholder="enter email address"
                    noValidate
                    className="c-newsletter__email"
                />
            </ReduxForm.Field>

            <Button
                type="submit"
                className="pw--tertiary u-text-uppercase"
                disabled={submitting || invalid}
            >
                Submit
            </Button>
        </FieldRow>

        {error &&
            <div className="pw-field__error">
                {error}
            </div>
        }
    </form>
)

const MyForm = reduxForm({
    form: 'MY_FORM',
    validate
})(Form)

// the rest of the container...
// Add this somewhere: `<MyForm />`