如何在 React 中模拟 Context API 嵌套的消费者进行测试？答案

【问题标题】：How to mock the Context API nested Consumers in React to test?如何在 React 中模拟 Context API 嵌套的消费者进行测试？
【发布时间】：2018-11-15 05:34:21
【问题描述】：

我正在使用 React 新的 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;

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

我参考这些文章：

但似乎他们没有将多个消费者放入一个文件并将其导出以像我正在做的那样使用。

【问题讨论】：

您可以将您的测试代码添加到问题中吗？ Enzyme 允许在浅层渲染和安装渲染中使用可选的上下文参数，尽管我还不知道它是否适用于新的 API

标签： reactjs

【解决方案1】：

我也有类似的需求，我只是模拟了适当的上下文消费者来传递模拟数据。

例如在您的情况下，在您的测试文件中，类似于：

import { EditFormCanvasContext } from '?';
import { mockEditFormCanvasContext } from '?';


EditFormCanvasContext.Consumer = jest.fn((props: any) => props.children({ ...mockEditFormCanvasContext }));

【讨论】：

谢谢，斯蒂芬！我稍后会测试你的建议。