React Jest: Как получить состояние флажка

Question

Я пытаюсь найти статус флажка в компоненте React. Это мой компонент:

class Checkboxes extends React.Component { 
    constructor() { 
     super(); 
     console.log('Hello world!'); 
     this.state = { 
      filterEnabled: { 
       'desserts': true, 
       'juices': true, 
       'meats': true, 
       'veggies': true, 
      }, 
      isApplyingFilter: false 
     }; 
    } 

    getInitialState() { 
     return { 
      filterEnabled: { 
       'desserts': true, 
       'juices': true, 
       'meats': true, 
       'veggies': true 
      }, 
      isApplyingFilter: false 
     }; 
    } 

    render() { 
     const { isApplyingFilter } = this.props; 
     return (
      <div> 
       <div className="row"> 
        <div className="col-md-12"> 
         <div className="mt-checkbox-inline"> 
          <label className="mt-checkbox"> 
           <input type="checkbox" name="desserts" value="desserts" 
            checked={this.state.filterEnabled.desserts} 
           /> 
           <span>desserts</span> 
          </label> 
          <label className="mt-checkbox"> 
           <input type="checkbox" name="juices" value="juices" 
            checked={this.state.filterEnabled.juices} 
           /> 
           <span>juices</span> 
          </label> 
          <label className="mt-checkbox"> 
           <input type="checkbox" name="meats" value="meats" 
            checked={this.state.filterEnabled.meats} 
           /> 
           <span>meats</span> 
          </label> 
          <label className="mt-checkbox"> 
           <input type="checkbox" name="veggies" value="veggies" 
            checked={this.state.filterEnabled.veggies} 
           /> 
           <span>veggies</span> 
          </label> 
         </div> 
        </div> 
       </div> 
      </div> 
     ); 
    } 
} 

Я написал следующий тестовый сценарий:

it('Applying "foods" filter will display only selected food items.',() => { 
    // Locate the checkboxes div 
    var checkboxes = TestUtils.scryRenderedDOMComponentsWithTag(DOM, 'input'); 
    // Pick the first checkbox 
    var cb = checkboxes[0].attributes; 
    // prints out "desserts" 
    console.log('name: ', cb['name'].value); 
    // prints out an empty string 
    console.log('checked: ', cb['checked'].value); 
}); 

При попытке получить значение для cb['checked'], он просто печатает пустую строку ''. Вместо этого я ожидаю получить true.

Каков правильный способ установить состояние флажка?

Answer 1

Поскольку вы установили checked равным this.state.filterEnabled, достаточно было бы просто проверить состояние.

expect(this.state.filterEnabled.desserts).toBe(true);