带反应的酶开关盒答案

【问题标题】：Enzyme switch case with react带反应的酶开关盒
【发布时间】：2018-05-05 03:59:56
【问题描述】：

我有一个函数，它依赖于参数返回组件或 null。我创建了一个对象数组，其中包含应返回的参数和组件。如何检查我使用 switch/case 语句返回的内容。

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.only('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', () => {
            const result = getMiConfiguration(id)
        }))
     })

【问题讨论】：

标签： reactjs unit-testing ecmascript-6 mocha.js enzyme

【解决方案1】：

这对我有帮助，但在测试 redux 表单时仍然存在问题

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

【讨论】：

【解决方案2】：

我会从循环中提取it 方法，例如：

describe.only('getMiConfiguration', () => {
    it('should render correct component', () => {
        [
            {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}) => {
            const result = getMiConfiguration(id);
            // your assertion
            expect(result).toBe('your expected value');
        })
    })
})

【讨论】：

用于判断真假，MiConfigurationTypes.AccessPointOnly时需要检查null