test form elements in isolation

Hello,

I have an input on which I use Decorator, it works well in browser, however when I try to test it without wrapping it in Form element I get Cannot read property 'attachToForm' of undefined Is there a way to test form elements in isolation without having to wrap them in Form tag?

[arnif]

I solved this by creating a Formsy stub

var React = require('react');

export default class FormsyStub extends React.Component {
  static childContextTypes = {
    formsy: React.PropTypes.object.isRequired
  };

  getChildContext() {
      return {
          formsy: {
              attachToForm() { },
              detachFromForm() { },
              validate() { },
              isFormDisabled() { },
              isValidValue() { }
          }
      };
  }

    render() {
        return this.props.children();
    }
}

Then in my test:

import Stub from './FormsyStub';
const target = TestUtils.renderIntoDocument(<Stub>{ () => <Component stuff="stuff" /> }</Stub>);

[clayne11]

Something like this: https://gist.github.com/clayne11/1ae19045adf31ddf51b9868288aefda5

With the way I have exported the TextField component, you can import it into a test file and test it independently of Formsy.

That being said, I don’t like the way Formsy uses functions rather than values. In certain situations props won’t update because the function hasn’t changed, even though the value has.

I use a different HOC than the one included with Formsy. This is mine:

import React, {PropTypes} from 'react';
import Formsy from 'formsy-react';
const {Mixin} = Formsy;

export default () => (Component) => {
  if (process.env.NODE_ENV !== 'production' && !Component) {
    console.error(`Must pass a component into FormsyDecorator`); // eslint-disable-line no-console
  }

  return (
    React.createClass({
      propTypes: {
        disabled: PropTypes.bool,
      },

      mixins: [Mixin],

      render() {
        const props = _.omit(this.props, 'value');
        return React.createElement(Component, {
          setValidations: this.setValidations,
          setValue: this.setValue,
          resetValue: this.resetValue,
          getValue: this.getValue,
          hasValue: this.hasValue,
          getErrorMessage: this.getErrorMessage,
          getErrorMessages: this.getErrorMessages,
          isFormDisabled: this.isFormDisabled,
          isValid: this.isValid,
          isPristine: this.isPristine,
          isFormSubmitted: this.isFormSubmitted,
          isRequired: this.isRequired,
          showRequired: this.showRequired,
          isValidValue: this.isValidValue,
          showError: this.showError(),
          ...props,
          onChange: this.setValue,
          value: this.getValue(),
          disabled: this.props.disabled || this.isFormDisabled(),
          errorMessage: this.getErrorMessage(),
        });
      }
    })
  );
};