酶檢查複選框狀態

Question

我有下面的例子組件

export default class Header extends Component{ 

render(){ 
    let activeStyle = {"backgroundColor": "green"}; 
    let inActiveStyle = {"backgroundColor": "red"}; 
    return(
    <div className="profile-header" style={(this.props.active)? 
     activeStyle:inActiveStyle}> 
     <input type="checkbox" checked={this.props.active} readOnly/> 
    </div> 
); 
} 
} 

使用酶和薛寶釵我想斷言，對於

this.props.active = true 

的的backgroundColor是綠色複選框被選中。

這裏是我的測試案例

describe('<Header />',() => { 
    it('valid component',() => { 
    const wrapper = shallow(<ProfileHeader 
    active= {true} 
    />); 
    ???? 
    }); 

但我怎麼能斷言這兩種情況？

Answer 1

檢查下面的解決方案，你可以用css字符串選擇器檢查背景顏色（可能需要在選擇器中進行一些更改）。 以下所有斷言都經過測試和工作。

describe('<Header />',() => { 
    it('valid component',() => { 
    const wrapper = shallow(<ProfileHeader />); 
    wrapper.setProps({ active: true }); 
    let checkbox = wrapper.find({ type: 'checkbox' }); 
    expect(checkbox.props().checked).to.equal(true); 
    expect(wrapper.find('.backgroundColor')).to.equal('green'); 
    wrapper.setProps({ active: false }); 
    checkbox = wrapper.find({ type: 'checkbox' }); 
    expect(checkbox.props().checked).to.equal(false); 
    expect(wrapper.find('.backgroundColor')).to.equal('red'); 
    }); 
});