Typescript 包含Context.Provider和Context.Consumer的React上下文测试组件

我正在尝试测试一个组件，该组件包含React上下文的提供者和使用者。请参阅下面的App.tsx。 提供程序位于也处理状态的包装器类中

如何模拟ConfigurationContextProvider包装类，以便它能够正确地向使用者提供

loadedStatus

值，以测试App.tsx的各种呈现

App.tsx：

public render（）：React.ReactNode{
返回(
{ ({ 
加载状态，
})：ReactElement=>{
开关（加载状态）{
案例ConfigStatus.GoodConfiguration：
返回（this.renderApp（））；
案例ConfigStatus.NotLoaded：
返回（this.renderRunLoadedApp（））；
案例ConfigStatus.BadConfiguration：
返回（this.renderBadConfiguration（））；
}
}}
)}

ContextProvider.tsx：

export const ConfigurationContext=React.createContext（未定义）；
导出枚举配置状态{
未加载，
不良配置，
良好配置
}
导出接口配置状态{
loadedStatus：配置状态；
baseUrl:URL；
}
导出类ConfigurationContextProvider扩展组件<{}，ConfigurationState>{
构造函数（props:{}）{
超级（道具）；
this.state={
loadedStatus:ConfigStatus.NotLoaded，
baseUrl:null
}
}
异步组件didmount（）：承诺{
等待此消息。loadConfiguration（）；
}
setConfiguration（配置：响应）：void{
const URL_KEY='BASE_URL'；
常量URL_值=配置[URL_键]；
if（！Object.prototype.hasOwnProperty.call（配置，URL\u键））
{
this.setState（{loadedStatus:ConfigStatus.BadConfiguration}）；
错误（`configs中缺少字段：${URL\u KEY}`）；
}
否则{
试一试{
这是我的国家({
loadedStatus:ConfigStatus.GoodConfiguration，
baseUrl：新URL（URL_值），
});
}
抓住{
this.setState（{loadedStatus:ConfigStatus.BadConfiguration}）；
错误（`environment configs中的错误URL-${URL\u KEY}:${URL\u VALUE}`）；
}
}
}
loadConfiguration（）：承诺{
const configPromise:Promise=fetch（'./env.json'）；
返回configPromise.then（（response）=>response.json（）
.then（（config:Response）=>this.setConfiguration（config））；
}
render（）：React.ReactNode{
返回(
{this.props.children}
)
}
}

发现最简单的方法是使用ConfigurationContextProvider的spyOn loadConfig函数，并根据需要将响应设置为setConfig。这种方法可以测试各种结果，并根据需要进行完整的上下文/状态更新

jest.spyOn(
  ConfigurationContextProvider.prototype, 'loadConfiguration').mockImplementation(
    function(this: ConfigurationContextProvider) {
      this.setConfiguration( { BASE_URL: 'http://localhost:8080' });
      return Promise.resolve();
    }
);

---

发现最简单的方法是使用ConfigurationContextProvider的spyOn loadConfig函数，并根据需要将响应设置为setConfig。这种方法可以测试各种结果，并根据需要进行完整的上下文/状态更新

jest.spyOn(
  ConfigurationContextProvider.prototype, 'loadConfiguration').mockImplementation(
    function(this: ConfigurationContextProvider) {
      this.setConfiguration( { BASE_URL: 'http://localhost:8080' });
      return Promise.resolve();
    }
);