IT技术 - 如何在 React 中模拟 Context API 嵌套的 Consumers 进行测试？ - 吾爱随笔录

我正在使用 React new Context API 来管理我们的组件状态，以下是我的基本代码结构：

对于每个功能组件，我都有一个 Provider 类来管理其状态信息。例如 EditFormCanvasProvider：

class EditFormCanvasProvider extends React.Component<Props, State> {

    state = {
        controlsInfo: []
    }      

    render() {
        return (
            <EditFormCanvasContext.Provider value={this.state}>
                {this.props.children}
            </EditFormCanvasContext.Provider>
        )
    }
}

export default EditFormCanvasProvider;

为了从其他组件消费所需的提供者，创建了一个消费者 javascript 文件，示例代码如下：

export default function FormBuilderConsumers(props) {
    const { children } = props;

    return (
        <FormBuilderContext.Consumer>
            {FormBuilder =>
                <EditFormCanvasContext.Consumer>
                    {
                        EditFormCanvas => children({ FormBuilder, EditFormCanvas })
                    }
                </EditFormCanvasContext.Consumer>
            }
        </FormBuilderContext.Consumer>
    )
}

在 FormBuilder 函数 javascript 组件文件中，该文件使用 FormBuilderConsumers。代码如下：

const FormBuilder = () => {
    return (
        <FormBuilderConsumers>
            {(appData) =>
                <div >
                    <Modal dismissible={true}                       
                        isOpen={appData.FormBuilder.modalIsOpen}
                        prompt={appData.FormBuilder.modalPrompt}
                        title={appData.EditFormCanvas.controlsInfo[0]}
                        size="medium"
                    >
                        <div>
                            {appData.FormBuilder.modalMessage}
                        </div>
                    </Modal>


                </div>
            }
        </FormBuilderConsumers>
    )
}
export default FormBuilder;

我正在尝试使用 Jest 模拟 FormBuilder 中的 FormBuiderConsumers 以测试 FormBuilder 组件。但我不知道该怎么做。

我参考了这些文章：

但似乎他们没有将多个消费者放入一个文件中并将其导出为我正在做的事情。