为什么这两种测试方式所得到的结果不一样

Question

老师您好，
在click event的测试中
我这样写selector。 所得到的结果就是false，

 let secondCateogry = wrapper.find('.category-item').at(1)
 secondCateogry.simulate('click', { preventDefault(){}})
 expect(secondCateogry.hasClass('active')).toEqual(true)

而如果改成

expect(wrapper.find('.category-item').at(1).hasClass('active')).toEqual(true)

返回的结果就是直接是正确的了。这个原理是什么吖。。

这一部分所有代码

it('click the item should add active class and trigger the call back function',()=>{
        let wrapper = mount(<CategorySelect {...props_with_default_category} />)
        // click the second item
        let secondCateogry = wrapper.find('.category-item').at(1)
        secondCateogry.simulate('click', { preventDefault(){}})
        // highlight should be on the second category instead of the first category
        expect(wrapper.find('.category-item').first().hasClass('active')).toEqual(false)
        //expect(secondCateogry.hasClass('active')).toEqual(true) -- not correct 
        expect(wrapper.find('.category-item').at(1).hasClass('active')).toEqual(true)
        expect(props_with_default_category.onSelectCategory).toHaveBeenCalledWith(categories[1])
    })

Answer 1

张轩 2019-06-18 11:18:48

第一次保存下来的变量 secondCateogry 是不会随着simulate 的事件所变化，也可以是它是 immutable 的。

你可以把它打出来看看

console.log(secondCateogry.debug())

但是重新取一次就会取得到新的值

• 提问者 慕斯6088333 #1

  非常感谢！

Answer 2

提问者 慕斯6088333 2019-06-12 01:44:51

import React from 'react'
import PropTypes from 'prop-types'
import Ionicon from 'react-ionicons'


class CateogrySelect extends React.Component{

constructor(props){
super(props)
        this.state = {
"selectedCategoryId": this.props.defaultCategory && this.props.defaultCategory.id
}
}

    /**
     * HighLight selected category if it exists with active ClassName
     * selectedCategoryId can be null, so that there is no active category
     */
generateClassName = (category, selectedCategoryId)=>{
        return category.id === selectedCategoryId ? "category-item col-3 active": "category-item col-3"
}
    /**
     * Set selected categoryId and invoke the call back function
     */
setSelectedCategory = (event, category) =>{
        event.preventDefault()
        this.setState({
"selectedCategoryId": category.id
})
        this.props.onSelectCategory(category)
}

render(){
        const {categories} = this.props
        const {selectedCategoryId} = this.state
        return(
<div className= "category-select-component">
<div className="row">
{
                        categories.map( (category,index) => (
<div className={this.generateClassName(category,selectedCategoryId)} key ={index}
role="button" style={{ textAlign: 'center'}}
onClick={(event) => this.setSelectedCategory(event,category)} >
<Ionicon icon={category.iconName}
className= 'rounded-circle'
fontSize="50px"
color="#555"
style={{ backgroundColor: '#347eff', padding: '5px' }}>
</Ionicon>
</div>
))
}
</div>
</div>
)
}
}


CateogrySelect.propTypes = {
    categories: PropTypes.arrayOf(PropTypes.object).isRequired,
    onSelectCategory: PropTypes.func.isRequired,
    defaultCategory: PropTypes.object
}
export default  CateogrySelect

代码如上。麻烦啦～0.0

• 提问者 慕斯6088333 #1

  为什么贴到幕课网上格式就乱了。。

Answer 3

张轩 2019-06-11 14:20:17

我本地的代码已经修改，能不能把你写的CategorySelect 这个组件的代码贴给我，我回去试试看是什么问题？

• 提问者 慕斯6088333 #1

  好的。