Enzyme unit test to type of HOC component with proxyquire

Question

I've got a function that return depends on parameters HOC componetns. I wrraped this component to reduxForm HOC. I would like to test it with an enzyme using type(). The function returns HOC components with type FormValues, but how to return for test without HOC. How to test it with proxyquire

function

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

test

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

example of a component

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)

You can return your WanderingDetection component from your file and use that in your unit test. export { WanderingDetection }; — Amit Chauhan, Dec 19 '17 at 13:50
I've got export but function return HOC component and when I import as without {'wanderingDetection'} I to compare result.type() // FormValues HOC with component .type(WanderingDetection) — Palaniichuk Dmytro, Dec 19 '17 at 13:57
I am trying to say is your default return with HOC is fine. Add one more export for your unit test which will return component without wrapping it inside formValues so that you can test it. — Amit Chauhan, Dec 19 '17 at 13:59
Ok when add import as {WanderingDetection} without HOC export const WanderingDetection, it not help me because the real function that Iám testing returns with HOC — Palaniichuk Dmytro, Dec 19 '17 at 14:04

score 0 · Answer 1 · answered Dec 19 '17 at 14:46

I found solution with proxyquire to overriding export

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

Enzyme unit test to type of HOC component with proxyquire

1 Answers1