如何使用笑话和酵素来测试动态生成的内容?

时间:2019-06-18 10:02:27

标签: reactjs redux jestjs enzyme

因此,此组件“ 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)
    })
}); 

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