Reactjs 如何模拟包装在函数中的类组件的上下文

我做了这个测试：

describe('exportData', () => {
    const exportData = jest.fn();

    const props = {
        endDate: '2020-03-13',
        actualReportDate: '2020-03-1',
        exportData,
        exportName: 'someName',
        intl: Symbol('Intl'),
        customer: { code: 75 },
        metric: { id: 1 },
        metrics: [],
    };

    it('returns correct value', () => {
        const C = () => null;
        const WrappedC = enhanceWithImageTableData(C);
        const wrapper = shallow(<WrappedC {...props} />);
        wrapper.instance().exportData('downloadType');
        expect(exportData).toHaveBeenCalledWith(
            props.exportName,
            props.intl,
            props.customer.code,
            props.actualReportDate,
            props.metric.id,
            { isOnlyIssues: 'no' },
            [],
            {
                customer: props.customer,
                downloadType: 'downloadType',
                metrics: props.metrics,
                reportConfigs: {},
            },
            props.actualReportDate,
        );
    });
});

通常，我会在测试文件的上下文中包装组件，如下所示：

 mount(
        <ImageTableModalProvider value={{ softFilters: [], setSoftFilters: () => {} }}>
            <WrappedC />
         </ImageTableModalProvider>,
  ),

挂载(
{} }}>
,
),

但在本例中，wrapper.instance（）变为null。 我尝试将模拟上下文注入到组件中，但由于它被包装在函数中，所以失败了 这是正在测试的部件（仅限相关部件，因为它相当大）

使用ImageTableData导出函数增强（ComponentClass）{
类ImageTableData扩展了PureComponent{
构造函数（道具、上下文）{
超级（道具、背景）；
设softFilters=[]；
softFilters=[props.metric&&props.metric.skuFilter].filter（x=>x）；
if（props.prevLocation==路由\u ID.单个\u SKU\u图像\u模式）{
softFilters=[…this.context.softFilters]；
}否则{
//注意：我认为所有关于this.context的警告都是一个bug。
//根据官方文件，这就是你应该如何使用它
//       https://reactjs.org/docs/context.html
this.context.setSoftFilters（softFilters）；//注意：此行在测试中抛出错误
}
此.state={
软过滤器，
};
this.exportData=this.exportData.bind（this）；
}
exportData（下载类型）{
常数{
米制的
韵律学，
报告配置，
顾客
国际，
exportName，
结束日期，
实际报告日期，
}=这是道具；
const customerCode=（customer |{}）.code；
返回此.props.exportData(
exportName，
国际，
客户代码，
实际报告日期| |结束日期，
公制id，
{…this.props.filters，…this.state.filters}，
this.state.softFilters，
{下载类型、指标、报告配置、客户}，
实际报告日期| |结束日期，
);
}
render（）{
返回；
}
}
ImageTableData.contextType=MyContext；
返回ImageTableData；
}

你知道如何在这种新形势下保持这种测试吗？ 我知道测试中的组件是以过时的模式构建的，但可以正常工作

---

这里有一些遗留代码。

检查组件内的内容-

this.context.setSoftFilters

？

 mount(
        <ImageTableModalProvider value={{ softFilters: [], setSoftFilters: () => {} }}>
            <WrappedC />
         </ImageTableModalProvider>,
  ),

export function enhanceWithImageTableData(ComponentClass) {
class ImageTableData extends PureComponent {
    constructor(props, context) {
        super(props, context);
        let softFilters = [];
        softFilters = [props.metric && props.metric.skuFilter].filter(x => x);

        if (props.prevLocation === ROUTE_IDS.SINGLE_SKU_IMAGE_MODAL) {
            softFilters = [...this.context.softFilters];
        } else {
            // NOTE: all the warnings for this.context I believe are a bug.
            //       this is how you should be using this according to official docs
            //       https://reactjs.org/docs/context.html
            this.context.setSoftFilters(softFilters); // NOTE: this line throws error in test
        }

        this.state = {
            softFilters,
        };

        this.exportData = this.exportData.bind(this);
    }

    exportData(downloadType) {
        const {
            metric,
            metrics,
            reportConfigs,
            customer,
            intl,
            exportName,
            endDate,
            actualReportDate,
        } = this.props;
        const customerCode = (customer || {}).code;

        return this.props.exportData(
            exportName,
            intl,
            customerCode,
            actualReportDate || endDate,
            metric.id,
            { ...this.props.filters, ...this.state.filters },
            this.state.softFilters,
            { downloadType, metrics, reportConfigs, customer },
            actualReportDate || endDate,
        );
    }

    render() {
        return <ComponentClass {...allTheProps} />;
    }
}

ImageTableData.contextType = MyContext;

return ImageTableData;
}