Testing 酶检查复选框状态

我有以下示例组件

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

背景色为绿色，复选框已选中

这是我的测试用例

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

描述（“”，（）=>{
它（'有效组件'，（）=>{
常量包装器=浅（）；
????
});

---

但是我怎样才能断言这两种情况呢？

检查下面的解决方案，您可以使用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');
  });
});

描述（“”，（）=>{
它（'有效组件'，（）=>{
常量包装器=浅（）；
setProps（{active:true}）；
让checkbox=wrapper.find（{type:'checkbox'}）；
expect（checkbox.props（）.checked）.to.equal（true）；
expect（wrapper.find（'.backgroundColor'））.to.equal（'green'）；
setProps（{active:false}）；
checkbox=wrapper.find（{type:'checkbox'}）；
expect（checkbox.props（）.checked）.to.equal（false）；
expect（wrapper.find（'.backgroundColor'））.to.equal（'red'）；
});
});

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