reactjs - 如何在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;
   

我正在尝试使用 Jest 模拟 FormBuilder 中的 FormBuiderConsumers 来测试 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

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

例如在你的情况下，在你的测试文件中，类似:

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


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