Как я могу использовать шутки и энзимы для тестирования содержимого, генерируемого динамически?

Question

Итак, этот компонент «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)

Вопрос Как я могу сделать тест, в котором я могу проверить, отображается ли какой-либо компонент? Или, как я могу написать тест, в котором я могу проверить, отображается ли какой-либо элемент itemDetails?

До сих пор я пытался это сделать, чтобы проверить, могу ли я найти какую-либо визуализацию, но она всегда возвращает мне сообщение об ошибке "Не удается прочитать свойство 'find' of undefined". Вот тестовый код:

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

Answer 1

Итак, я нашел ответ, основанный на этом: Тестирование React Redux - не может прочитать свойства undefined или обертку undefined

Это отлично сработало для меня!Я получаю, что, чтобы сгенерировать компонент, мне пришлось передать некоторые реквизиты для компонента.Это настройка, которую я использовал, чтобы заставить тест работать:

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