how to access non exported function for enzyme in react functional component

Viewed 23

I am trying to excess the non-exported function from the react functional component to my mocha/enzyme test case but somehow I am getting an undefined error.

In the previous version of react, we can access the method with wrapper.instance() method which can't be done in the functional component and I am getting no documentation to access the functions.

Has anyone faced the same issue or solved this kind of issue?

import React, { useState } from "react";
import PropTypes from "prop-types";
import dotProp from "dot-prop";

export const Form = (props) => {
  console.log(props);

  console.log(props.initialValues);

  const [state, setState] = useState({
    values: { ...props.initialValues },
  });

  const onChange = (name, value) => {
    const newValues = { ...state.values };

    dotProp.set(newValues, name, value);

    setState({ values: newValues });
    props.onFormChange(newValues);
  };
  const onSubmit = (e) => {
    //validations

    props.onFormChange(state.values);
  };

  function getChildContext() {
    return {
      formName: props.formName,
      initialValues: props.initialValues,

      onBlur: onChange,

      onChange: onChange,
      onSubmit: onSubmit,

      validateOnBlur: props.validateOnBlur,
      validateOnChange: props.validateOnChange,
      validateOnSubmit: props.validateOnSubmit,
      values: state.values,
    };

    return <div className={props.className}>{props.children}</div>;
  }

  Form.propTypes = {
    /** React children prop */

    children: PropTypes.node.isRequired /** Name of the form; identifier */,

    formName: PropTypes.string.isRequired,
    /** Initialize the form fields with these values */ initialValues:
      PropTypes.object,
    /** Callback passing form values to parent */ onFormChange:
      PropTypes.func.isRequired,
    /** Should run validations on blur */ validateOnBlur:
      PropTypes.bool /** Should run validations on change */,
    validateOnChange: PropTypes.bool,
    /** Should run validations on form submission */ validateOnSubmit:
      PropTypes.bool,
  };

  Form.defaultProps = {
    initialValues: {},

    validateOnBlur: false,

    validateOnChange: false,

    validateOnSubmit: false,
  };

  Form.childContextTypes = {
    className: PropTypes.string,

    formName: PropTypes.string.isRequired,

    initialValues: PropTypes.object,

    onBlur: PropTypes.func.isRequired,

    onChange: PropTypes.func.isRequired,

    onSubmit: PropTypes.func.isRequired,

    values: PropTypes.object.isRequired,

    validateOnBlur: PropTypes.bool,

    validateOnChange: PropTypes.bool,
    validateOnSubmit: PropTypes.bool,
  };
};
export default Form;

Test Case:

describe.only("Form Component", () => {
  let props;
  beforeEach(() => {
    props = {
      formName: "default",
      onFormChange: () => {},
      initialValues: {
        chocolate: true,
        vanilla: false,
      },
    };
  });
  it("should set values using dot notation", () => {
    const wrapper = shallow(<Form {...props}>children</Form>);
    wrapper.onChange("chocolate", "egg");
    wrapper.onChange("cones.options", true);
    wrapper.onChange("cones.flavours.toppings", ["sprinkles", "strawberry"]);
    const result = {
      chocolate: "egg",
      cones: {
        options: true,
        flavours: {
          toppings: ["sprinkles", "strawberry"],
        },
      },
      vanilla: false,
    };
    expect(wrapper.props().state.values).to.eql(result);
  });
});

Error which I am getting

Form Component should set values using dot notation: TypeError: wrapper.onChange is not a function

0 Answers
Related