React Jest: Wie bekomme ich den Status der Checkbox

Question

Ich versuche, den checked Status eines Kontrollkästchens in einer React-Komponente zu finden. Dies ist meine Komponente:

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

ich folgendes Testszenario schrieb:

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

Wenn ich den Wert für cb['checked'] zu bekommen versuchen, es einfach druckt '' eine leere Zeichenfolge aus. Ich erwarte stattdessen true.

Was ist der richtige Weg, um den Status der Checkbox zu erhalten?

Answer 1

Da Sie als gleich this.state.filterEnabled aktiviert haben, reicht es aus, nur den Status zu überprüfen.

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