reactjs - 使用 proxyquire 对 HOC 组件类型进行酶单元测试

Question

我有一个返回取决于参数 HOC 组件的函数。我将此组件包装到 reduxForm HOC。我想使用 type() 用酶对其进行测试。该函数返回类型为 FormValues 的 HOC 组件，但如何在没有 HOC 的情况下返回进行测试。如何使用 proxyquire 对其进行测试

功能

export const getMiConfiguration = miConfigurationType => {
    switch (miConfigurationType) {
        case MiConfigurationTypes.WanderingDetection :
        case MiConfigurationTypes.MuteWanderingDetection:
            return <WanderingDetection />

        case MiConfigurationTypes.OpenWanderingControl :
        case MiConfigurationTypes.LockedWanderingControl:
            return <WanderingControl />

        default:
            return null
    }
}

测试

describe('getMiConfiguration', () => {
    ;[{id: MiConfigurationTypes.AccessPointOnly, component: null},
        {id: MiConfigurationTypes.WanderingDetection, component: <WanderingDetection/>},
        {id: MiConfigurationTypes.MuteWanderingDetection, component: <WanderingDetection/>},
        {id: MiConfigurationTypes.LockedWanderingControl, component: <WanderingControl/>},
        {id: MiConfigurationTypes.OpenWanderingControl, component: <WanderingControl/>},
    ].forEach(({id, component}) =>
        it(`should render correct ${component} component for ${id} type`, () => {
            const result = getMiConfiguration(id)

            if (component === null)
                expect(result).to.be.null
            else
                result.type.should.be.equal(component.type)
        }))
})

组件示例

export const WanderingDetection = ({miConfigurationType}) =>
    <Grid container>
        <Grid item xs={12}>
            <GeneralMiConfigurations />
        </Grid>
        {MiConfigurationTypes.MuteWanderingDetection === miConfigurationType &&
            [
                <Grid item xs={10} style={{margin: '0 auto'}}>
                    <Divider/>
                </Grid>,
                <Grid item xs={12} style={{alignSelf: 'center'}}>
                    <InfoMessage id='passage.label.useInputToMuteLocationField'/>
                    <InputTypeConfiguration/>
                </Grid>,
            ]
        }
    </Grid>

WanderingDetection.propTypes = {
    miConfigurationType: PropTypes.string,
}
export default formValues('miConfigurationType')(WanderingDetection)

Answer 1

我找到了使用 proxyquire 来覆盖导出的解决方案

const {getMiConfiguration} = proxyquire('../../../../src/components/devices/miConfiguration', {
    './wanderingDetection': {default: <WanderingDetection/>},
    './wanderingControl': {default: <WanderingControl/>},
})