Testing with Jest: Tip #12

Form-test.jsx

import renderer from 'react-test-renderer'
import Form, { validate } from '../Form'

jest.mock('redux-form', () => ({
  Field: 'Field',
  reduxForm: options => {
    // Wrap the component and return the new component, just like the real hoc does
    return Form => props => {
      // call the validate error to make sure errors are detected
      options.validate({}, props)
      return <Form {...props} />
    }
  }
}))

it('should render correctly', () => {
  const translate = jest.fn()
  const component = renderer.create(<Form translate={translate} />)
  expect(component.toJSON()).toMatchSnapshot()
})

it('should validate correctly', () => {
  // change the default mock behavior to pass through the provided string
  const translate = jest.fn(str => str)

  validate({}, { translate })
  expect(translate).toHaveBeenLastCalledWith('Required')

  validate(
    { username: 'much much longer than 15 characters buddy' },
    { translate }
  )
  expect(translate).toHaveBeenLastCalledWith('Must be 15 characters or less')

  validate({ username: 'ironman' }, { translate })
  expect(translate).not.toMatch({
    username: expect.any(String)
  })
})

Form.jsx

import { Field, reduxForm } from 'redux-form'

export const validate = (values, { translate }) => {
  const errors = {}
  if (!values.username) {
    errors.username = translate('Required')
  } else if (values.username.length > 15) {
    errors.username = translate('Must be 15 characters or less')
  }

  return errors
}

const renderField = ({
  input,
  label,
  type,
  meta: { touched, error, warning }
}) =>
  <div>
    <label>{label}</label>
    <div>
      <input {...input} placeholder={label} type={type} />
      {touched && (error && <span>{error}</span>)}
    </div>
  </div>

const Form = props => {
  const { handleSubmit, pristine, reset, submitting } = props
  return (
    <form onSubmit={handleSubmit}>
      <Field
        name="username"
        type="text"
        component={renderField}
        label="Username"
      />
      <div>
        <button type="submit" disabled={submitting}>Submit</button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>
          Clear Values
        </button>
      </div>
    </form>
  )
}

export default reduxForm({
  form: 'example',
  validate
})(Form)