Question

我使用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来测试FormBuilder组件使用Jest。但我不知道该怎么做。

我引用这些文章：

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

Answer 1

我也有类似的需求，我只是简单地模拟了适当的Context Consumer来传递模拟数据。

例如就您而言，在您的测试文件上，类似：

Import-Module

如何模拟React中的Context API嵌套使用者进行测试？

1 个答案: