web-dev-qa-db-ja.com

酵素チェックのチェックボックスのステータス

次の例のコンポーネントがあります

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

しかし、どうすれば両方のケースを主張できますか？

testingreactjsenzyme
11
Anh Tuan Nguyen

以下の解決策を確認してください。背景色については、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');
  });
});
16
anoop