因此,此组件“ 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'”。 测试代码是这样的:
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)
})
});
答案 0 :(得分:1)
因此我找到了一个基于以下答案的答案:Testing React Redux - cannot read properties of undefined, or wrapper 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)
})
});