如何在React中模拟Context API嵌套的Consumers进行测试？

Question

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

1. 对于每个功能组件，我都有一个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;
   

2. 为了从其他组件使用所需的提供程序，将创建一个使用者javascript文件，示例代码如下：

   export default function FormBuilderConsumers(props) {
       const { children } = props;
   
       return (
           <FormBuilderContext.Consumer>
               {FormBuilder =>
                   <EditFormCanvasContext.Consumer>
                       {
                           EditFormCanvas => children({ FormBuilder, EditFormCanvas })
                       }
                   </EditFormCanvasContext.Consumer>
               }
           </FormBuilderContext.Consumer>
       )
   }
   

3. 在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组件。但是我不知道该怎么做。

我正在引用这些文章：

• https://medium.com/@wyattsweet/testing-react-components-using-the-new-context-api-a1c553edc2fa
• https://medium.com/@ryandrewjohnson/unit-testing-components-using-reacts-new-context-api-4a5219f4b3fe

但似乎他们没有将多个使用者放在一个文件中，而是将其导出以按照我的方式使用。

Answer 1

我有类似的需求，我只是模拟了适当的Context Consumer以传递模拟数据。

例如，在您的测试文件中，例如：

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


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