如何在 React 中模拟上下文 API 嵌套的消费者进行测试?

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>
   )
   }
   

在 FormBuilder

3. 函数式 JavaScript 组件文件中，该文件使用 FormBuilderConsumer。代码如下：

   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

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

例如，在您的情况下，在您的测试文件中，如下所示：

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

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