首页 > 解决方案 > 如何测试提供上下文变量的 HOC 组件

问题描述

我为我的表单组件创建了一个 HOC ,它公开了几个函数作为context变量。这是代码:

// React 15


import React, { Component } from "react";
import PropTypes from "prop-types";

export default class FormContainer extends Component {
  constructor(props) {
    super(props);

    this.state = {
      shouldValidateForm: false
    };
  }

  getChildContext() {
    return {
      setFieldValue: (event, field) => {
        const fieldName = field.id;

        this.setState(prevState => ({
          [fieldName]: {
            ...prevState[fieldName],
            value: event.currentTarget.value
          }
        }));
      },

      addField: data => {
        this.setState({
          [data.id]: data
        });
      },
      formData: this.state
    };
  }

  /**
   * React Lifecycle Method: Renders the data
   *
   * @return {DOM} Main container DOM.
   */
  render() {
    return <form action="">{this.props.children}</form>;
  }

  static childContextTypes = {
    addField: PropTypes.func,
    setFieldValue: PropTypes.func,
    formData: PropTypes.object
  };
}

我想在单元测试addFieldsetFieldValue进行单元测试。我尝试了几件事,但我无法弄清楚。有人可以指出我如何测试它的正确方向吗?

标签: javascriptreactjsenzyme

解决方案


推荐阅读