单元测试通过接收对象数组作为参数的函数生成的反应组件

Question

我有一个函数，它返回带有对象数组值的 React 组件，我想用酶对其进行测试。

组件

const overrideTimeoutValues = [
    {minutes: 0, seconds: 10},
    {minutes: 0, seconds: 15},
    {minutes: 0, seconds: 20},
    {minutes: 0, seconds: 30},
    {minutes: 1, seconds: 0},
]

export const renderMenuItems = values => values.map(({minutes, seconds}) =>
    <MenuItem
        value={`00:${minutes.toString().padStart(2,0)}:${seconds.toString().padStart(2,0)}`}
        primaryText={<FormattedMessage
            id={minutes > 0 ? 'passage.outputTimeOut.minutes': 'passage.outputTimeOut.seconds'}
            values={{seconds, minutes}}
        />}
    />)

测试

const values = [
    {minutes: 0, seconds: 10},
    {minutes: 0, seconds: 15},
    {minutes: 0, seconds: 20},
    {minutes: 0, seconds: 30},
    {minutes: 1, seconds: 0},
]

describe.only('renderMenuItems', () => {

    it('should render <MenuItem/> with correct value', () => {

        values.forEach(({minutes, seconds}) => {

            const item = renderMenuItems([{minutes, seconds}])         item.props.value.should.be.equal(`00:${minutes.toString().padStart(2,0)}:${seconds.toString().padStart(2,0)}`)

        })
    })
})

问题是，我收到 [{component}] 并且无法通过循环检查 props 值，如何更好地测试它？谢谢。

Answer 1

    it('should render <MenuItem/> with correct value', () => {
            const item = renderMenuItems(values)

            values.forEach(({minutes,seconds}, i) => {
item[i].props.value.should.be.equal(`00:${minutes.toString().padStart(2,0)}:${seconds.toString().padStart(2,0)}`)    
            })
        })