How Can I Use Jest And Enzyme To Test Content Generated Dynamically?
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)
})
});
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)
})
});
Related Questions
- → Import statement and Babel
- → should I choose reactjs+f7 or f7+vue.js?
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → .tsx webpack compile fails: Unexpected token <
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → React Native with visual studio 2015 IDE
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
- → How do I determine if a new ReactJS session and/or Browser session has started?
- → Alt @decorators in React-Native
- → How to dynamically add class to parent div of focused input field?