如何访问未导出的 function 以获取反应功能组件中的酶

Question

我试图将反应功能组件中的未导出 function 过量到我的 mocha/enzyme 测试用例中，但不知何故我得到了一个未定义的错误。

在以前版本的 react 中，我们可以使用 wrapper.instance() 方法访问该方法，而这在功能组件中无法完成，而且我没有获得访问这些功能的文档。

有没有人遇到过同样的问题或解决过此类问题？

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;

测试用例：

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);
  });
});

我得到的错误

表单组件应使用点表示法设置值：TypeError: wrapper.onChange is not a function