Reactjs 如何使用jest和Ezyme来测试动态生成的内容？

因此，这个组件“Info”是一个容器，它处理一些数据以生成一个带有一些道具的“Details”子组件

Info.JS

   import React from 'react'

import Details from './Details/Details'
import {Card} from 'reactstrap'
import classes from './Info.module.css'
import {connect} from 'react-redux'

const Info = (props)=>{
    let itemDetails = 'Item Details'
    let items = undefined
    if(props.activeTab === '1'){
        items = props.shortTerm
    } else if (props.activeTab ==='2'){
        items = props.mediumTerm
    } else if (props.activeTab ==='3'){
        items = props.longTerm
    }
    if(items.length!==0){
        itemDetails=(
            items.map((i,index)=>{
                if(i.id===props.itemIndex){
                    return <Details
                            title={i.itemName}
                            desc={i.itemDesc}
                            date={"Created at "+i.created}
                            edited={i.lastEdited}
                            key={index}/> 
                }
                console.log(itemDetails)
            return null
            })
        )
    } else{
         return itemDetails = (
                        <Details 
                        title="Title"
                        desc="Description"
                        key={null}
                        date={null}/>
                        ) 
    }

    return(
            <Card className={classes.info}>
                {itemDetails}
            </Card>
    )
}

const mapStateToProps = (state) =>{
    return{
        shortTerm:state.reducer.items.shortTerm,
        mediumTerm:state.reducer.items.mediumTerm,
        longTerm:state.reducer.items.longTerm,
        activeTab:state.reducer.activeTab,
        itemIndex: state.reducer.itemIndex
    }
}

export default connect(mapStateToProps)(Info)

从“React”导入React
从“./Details/Details”导入详细信息
从“reactstrap”导入{Card}
从“./Info.module.css”导入类
从“react redux”导入{connect}
常量信息=（道具）=>{
让itemDetails='itemDetails'
让项目=未定义
如果（props.activeTab=='1'）{
项目=道具。短期
}否则如果（props.activeTab=='2'）{
项目=道具。中期
}else if（props.activeTab=='3'）{
项目=长期道具
}
if（items.length！==0）{
项目详情=(
items.map（（i，索引）=>{
if（i.id==props.itemIndex）{
返回
}
console.log（itemDetails）
返回空
})
)
}否则{
返回项目详细信息=(
) 
}
返回(
{itemDetails}
)
}
常量mapStateToProps=（状态）=>{
返回{
短期：state.reducer.items.shortTerm，
中期：state.reducer.items.mediumTerm，
长期：state.reducer.items.longTerm，
activeTab:state.reducer.activeTab，
itemIndex:state.reducer.itemIndex
}
}
导出默认连接（MapStateTops）（信息）

问题 如何进行测试，以检查是否呈现了任何组件？或者，如何编写一个测试来检查是否呈现了任何“itemDetails”

到目前为止，我尝试了这个测试，以测试是否可以找到任何正在渲染的对象，但它总是返回一个错误，告诉我“无法读取未定义的属性‘find’”。 测试代码如下：

Info.test.js

import React from 'react'
import {Provider} from 'react-redux'
import {configure,shallow,mount,render} from 'enzyme';
import Adapter from 'enzyme-adapter-react-16'
import Info from './Info'
import Details from './Details/Details'



configure({adapter:new Adapter()})

describe('<Info />',()=>{
    let wrapper
    beforeEach(()=>{
         wrapper= shallow(<Info/>);
    })

    it('Should return one Details',()=>{
        expect(wrapper.find(Details)).toHaveLength(1)
    })
}); 

从“React”导入React
从“react redux”导入{Provider}
从“酶”导入{configure，shall，mount，render}；
从'enzyme-Adapter-react-16'导入适配器
从“/Info”导入信息
从“./Details/Details”导入详细信息
配置（{适配器：新适配器（）}）
描述（“”，（）=>{
让包装器
在每个之前（（）=>{
包装器=浅（）；
})
它（'应该返回一个详细信息'，（）=>{
expect（wrapper.find（Details））.toHaveLength（1）
})
}); 

因此我找到了一个答案，基于此：

这对我来说非常有效！碰巧，为了生成组件，我必须向组件传递一些道具。这是我用于使测试正常工作的设置：

import React from 'react'
import {Provider} from 'react-redux'
import {configure,shallow,mount,render} from 'enzyme';
import Adapter from 'enzyme-adapter-react-16'
import {Info} from './Info'
import Details from './Details/Details'

configure({adapter:new Adapter()})

const setup=()=>{
    let props= {
        shortTerm:[],
        mediumTerm:[],
        longTerm:[],
        activeTab:'1',
        itemIndex:0
    }

    let wrapper = shallow(<Info {...props}/>);

    return {props, wrapper};
};

describe('<Info />',()=>{
    const {wrapper}=setup()

    it('Should return one Details Component',()=>{
        expect(wrapper.find(Details)).toHaveLength(1)
    })
});

从“React”导入React
从“react redux”导入{Provider}
从“酶”导入{configure，shall，mount，render}；
从'enzyme-Adapter-react-16'导入适配器
从“/Info”导入{Info}
从“./Details/Details”导入详细信息
配置（{适配器：新适配器（）}）
常量设置=（）=>{
让道具={
短期：[]，
中期：[]，
长期：[]，
activeTab:'1'，
项目索引：0
}
让包装器=浅（）；
返回{props，wrapper}；
};
描述（“”，（）=>{
const{wrapper}=setup（）
它（'应该返回一个详细信息组件'，（）=>{
expect（wrapper.find（Details））.toHaveLength（1）
})
});

您说它在

find

上抛出了一个错误，组件中没有使用

find

的代码，我猜

包装器是
未定义的。看看能不能回答你原来的问题。我看到
items详细信息
是基于
items
的，而这又是基于您发送的道具。在您的测试用例中，您没有模拟存储到
Info
组件，因此，首先模拟存储，以便您的容器将其拾取。您只需使用
store
prop for
Info
传递存储数据即可。是的，包装器未定义！你说的“项目详细信息基于项目”是什么意思？关于嘲弄商店，我要试一试，谢谢！