Ad

How Can I Use Jest And Enzyme To Test Content Generated Dynamically?

- 1 answer

So, this component "Info" is a container which process some data in order to generate a "Details" children component with some props.

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)

Question How can I make a test in which I can check if any component is being rendered? Or, how can I write a test in which I can check if any "itemDetails" is being rendered?

I tried this, so far, to test if I could find any being rendered but it always return me a error saying "Cannot read property 'find' of undefined". The test code is this one:

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

Answer

So I found an answer,based on this one: Testing React Redux - cannot read properties of undefined, or wrapper undefined

It worked perfectly for me! I happens that, to generate the component, I had to pass some props to the component. This is the setup that I used in order to make the test to work:

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)
    })
});
Ad
source: stackoverflow.com
Ad