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